什么是 redux-named-reducers
Redux 是一个非常流行的 JavaScript 状态管理库，它为应用程序提供了可预测的状态容器，并被广泛运用在前端开发中。而 redux-named-reducers 是一个为 Redux 打造的 npm 包，用于处理多个命名 reducer 并构建对应的 Reducer 组。
redux-named-reducers 的安装
redux-named-reducers 是一个 npm 包，你可以通过以下命令进行安装：
npm install redux-named-reducers
redux-named-reducers 的使用
创建 reducer
在仅使用 Redux 时，通常会将所有 reducer 组成一个统一的 reducer，类似于这样：
const rootReducer = combineReducers({
reducer1,
reducer2,
reducer3,
});在使用 redux-named-reducers 时，可以换种思路，将每个 reducer 都定义为一个独立的模块，这样就可以有效模块化 redux 并且更方便拓展。此时我们可以直接从 redux-named-reducers 中导入 combineNamedReducers：
-- -------------------- ---- ------- ------ - -------------------- - ---- ----------------------- ------ -------- ---- ------------- ------ -------- ---- ------------- ------ -------- ---- ------------- ----- ------- - ---------------------- --------- --------- --------- --- ------ ------- --------
可以看出，combineNamedReducers 这个函数与 combineReducers 极为相像，都接收一个对象作为参数，对象键名表示该 reducer 的名称，对象值则为 reducer 函数本身。
更改 state
redux-named-reducers 使你更容易操作 state 对象。通过该库导出的 createAction 和 createActions 可以轻易地创建 redux actions：
import { createAction } from 'redux-named-reducers';
const changeUserName = createAction('CHANGE_USER_NAME');
export default changeUserName;这个简单的示例库导出了一个 action 生成器，可以轻松创建此类简单的 action。我们可以在适当的时候 dispatch 这些 action，从而更改应用中的 state。
State 初始化
为了进行 state 的初始化，我们可以使用 createStore 原本的初始化形式（即 createStore(reducer, initialState) 的第二个参数），它提供了 reducer 的初始状态。对于每个命名 reducer，我们可以分别使用以下方式初始化：
const initialState = {
reducer1: { /* reducer1 state */ },
reducer2: { /* reducer2 state */ },
reducer3: { /* reducer3 state */ },
};redux-named-reducers 的示例代码
下面是一个更完整的示例：
- 创建命名 reducer
-- -------------------- ---- -------
-- -----------
----- ------------ - - ------ - --
----- -------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ------- ---------- 创建 action
// action.js
import { createAction } from 'redux-named-reducers';
const decrement = createAction('DECREMENT');
const increment = createAction('INCREMENT');
export { decrement, increment };- 创建 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