简介
redux-action-binder 是一个用于在 Redux 中绑定 action 和 reducer 的工具库，它可以让你在不写冗余代码的情况下创建 action 和 reducer，并将它们绑定在一起。这个工具为开发者提供了一种更加简单、直观的方式来处理 Redux 中的流程。
安装
在使用 redux-action-binder 之前需要先安装它，可以通过以下命令来进行安装：
npm install redux-action-binder
或者如果你使用了 Yarn，也可以使用以下命令来进行安装：
yarn add redux-action-binder
使用
创建 action
在 redux-action-binder 中，我们用 createAction 函数来创建 action。
import { createAction } from "redux-action-binder";
const setUserName = createAction("SET_USER_NAME", (name) => ({ name }));在这个例子中，我们创建了一个名为 setUserName 的 action，它将接受一个 name 参数，并将其赋值给 payload 属性。并且我们使用了 createAction 函数来创建它。
创建 reducer
在 redux-action-binder 中，我们用 createReducer 函数来创建 reducer。
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------- ----- ------------ - - ----- --- -- ----- ----------- - --------------------------- - -------------- ------- ------- -- -- --------- ----- ------------------- --- ---
在这个例子中，我们创建了一个名为 userReducer 的 reducer。它接受一个默认的状态，以及一个 action 与 reducer 的键值对。当调用 setUserName action 时，userReducer 将会被执行，并在状态中更新新的 name 值。
绑定 action 和 reducer
在 redux-action-binder 中，我们用 bindActions 函数来绑定 action 和 reducer。
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------------- ----- ------- - - ------------ -- ----- -------- - - ------------ -- ----- ------------ - -------------------- ----------
在这个例子中，我们创建了一个名为 boundActions 的对象，它将 setUserName 绑定到 userReducer 上。这样一来，当调用 setUserName action 时，它会自动触发 userReducer 的更新。
示例
下面是一个完整的示例，用于展示 redux-action-binder 的使用方法，以及如何将其应用于实际项目中：
-- -------------------- ---- ------- ------ - ------------- -------------- ----------- - ---- ---------------------- -- -- ------ ----- ----------- - ----------------------------- ------ -- -- ---- ---- -- -- ------- ----- ------------ - - ----- --- -- ----- ----------- - --------------------------- - -------------- ------- ------- -- -- --------- ----- ------------------- --- --- -- -- ------ - ------- ----- ------- - - ------------ -- ----- -------- - - ------------ -- ----- ------------ - -------------------- ---------- ------ ------- - ---------------- ------------ --
在这个例子中，我们创建了一个名为 user 的 module，它包含了一个名为 userReducer 的 reducer，以及一个绑定了 setUserName action 的 boundActions 对象。我们可以在整个项目中通过这个 module 来管理用户信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bdd