什么是 redux-named-reducers
Redux 是一个非常流行的 JavaScript 状态管理库,它为应用程序提供了可预测的状态容器,并被广泛运用在前端开发中。而 redux-named-reducers 是一个为 Redux 打造的 npm 包,用于处理多个命名 reducer 并构建对应的 Reducer 组。
redux-named-reducers 的安装
redux-named-reducers 是一个 npm 包,你可以通过以下命令进行安装:
--- ------- --------------------
redux-named-reducers 的使用
创建 reducer
在仅使用 Redux 时,通常会将所有 reducer 组成一个统一的 reducer,类似于这样:
----- ----------- - ----------------- --------- --------- --------- ---
在使用 redux-named-reducers 时,可以换种思路,将每个 reducer 都定义为一个独立的模块,这样就可以有效模块化 redux 并且更方便拓展。此时我们可以直接从 redux-named-reducers 中导入 combineNamedReducers:
------ - -------------------- - ---- ----------------------- ------ -------- ---- ------------- ------ -------- ---- ------------- ------ -------- ---- ------------- ----- ------- - ---------------------- --------- --------- --------- --- ------ ------- --------
可以看出,combineNamedReducers 这个函数与 combineReducers 极为相像,都接收一个对象作为参数,对象键名表示该 reducer 的名称,对象值则为 reducer 函数本身。
更改 state
redux-named-reducers 使你更容易操作 state 对象。通过该库导出的 createAction 和 createActions 可以轻易地创建 redux actions:
------ - ------------ - ---- ----------------------- ----- -------------- - --------------------------------- ------ ------- ---------------
这个简单的示例库导出了一个 action 生成器,可以轻松创建此类简单的 action。我们可以在适当的时候 dispatch 这些 action,从而更改应用中的 state。
State 初始化
为了进行 state 的初始化,我们可以使用 createStore 原本的初始化形式(即 createStore(reducer, initialState) 的第二个参数),它提供了 reducer 的初始状态。对于每个命名 reducer,我们可以分别使用以下方式初始化:
----- ------------ - - --------- - -- -------- ----- -- -- --------- - -- -------- ----- -- -- --------- - -- -------- ----- -- -- --
redux-named-reducers 的示例代码
下面是一个更完整的示例:
- 创建命名 reducer
-- ----------- ----- ------------ - - ------ - -- ----- -------- - ------ - ------------- ------- -- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - -- ------ ------- ---------
- 创建 action
-- --------- ------ - ------------ - ---- ----------------------- ----- --------- - -------------------------- ----- --------- - -------------------------- ------ - ---------- --------- --
- 创建 store
-- -------- ------ - ----------- - ---- -------- ------ - -------------------- - ---- ----------------------- ------ -------- ---- ------------- ----- -------- - - -------- -- ----- ----------- - ------------------------------- ----- ------------ - - --------- - ------ - - -- ----- ----- - ------------------------ -------------- ------ ------- ------
- 在应用中使用
-- ------ ------ ----- ---- -------- ------ - --------- ------- - ---- -------------- ------ - ---------- --------- - ---- ----------- ------ ----- ---- ---------- ----- --- - -- ------ ---------- --------- -- -- - -- ------- ----- -- ------------ ------- ------------------------------ ------- ------------------------------ --- -- ----- --------------- - ----- -- -- ------ -------------------- --- ----- ------------------ - - ---------- --------- -- ----- ------------ - ------------------------ ------------------------- ----- ------------ - -- -- - --------- -------------- ------------- -- ----------- -- ------ ------- -------------
通过引用 combineNamedReducers 和 createAction,我们在 reducer 中定义了名称化的 reducer 和使用名称对初始 state 进行初始化的对象。这使得应用程序中的所有部件都可以独立于 Redux 存在,并且可以轻松地按照需要更改。在 action.js 中,我们可以通过 createAction 进行 action 的定义,同样方便快捷;在 store.js 中,我们可以像以前一样创建一个 Redux store,并使用我们上面定义的 reducer 对其初始化。最后,在 App.js 中,我们将 Redux store 传递给 Provider,并通过 connect 将状态和行动中的部件 wrapped 包装起来,以实现该应用程序中的计数器。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067008e361a36e0bce8bba