随着前端技术的不断发展，Redux 已经成为了 Web 开发中状态管理的首选解决方案之一。而 create-reduxreducer 就是一个在 Redux 中快速创建 reducer 的 npm 包。本文将为大家介绍 create-reduxreducer 的使用教程。
安装
在使用 create-reduxreducer 之前，我们需要先在项目中进行安装。使用 npm 一键安装即可：
npm i create-reduxreducer
快速开始
在 create-reduxreducer 中，我们只需要提供一个 action 和一个 reducer 的对象，即可生成一个 reducer。
-- -------------------- ---- -------
------ ------------- ---- ---------------------
----- ------------ - -
------ -
-
----- --------- - -
----- ------------
-------- -
---- -
-
-
----- --------- - -
----- ------------
-------- -
---- -
-
-
----- ------- - --------------------------- -
----------------- ------- ------- -- -
------ -
---------
------ ----------- - ------------------
-
--
----------------- ------- ------- -- -
------ -
---------
------ ----------- - ------------------
-
-
--
------ ------- -------上面的代码就是一个 create-reduxreducer 的简单示例。使用 createReducer 来创建 reducer，传入 initialState 作为初始状态，然后传入一个对象作为 action 和 reducer 的映射关系。
在映射关系对象中，action 对象中的 type 属性作为键，对应的 reducer 函数作为值。当我们 dispatch 一个 action 时，createReducer 就会自动匹配到相应的 reducer 函数，并对状态进行更新。而这个过程，我们无需关心 action 和 reducer 是如何匹配的。
深入使用
除了上述基本使用方式，create-reduxreducer 还支持一些高级用法，让我们更便捷地操作 reducer。
combineReducers
在 Redux 中，将多个 reducer 合并为一个 rootReducer 是很常见的需求。create-reduxreducer 也同样支持 combineReducers。
-- -------------------- ---- ------- ------ -------------- - --------------- - ---- --------------------- ----- ----- - ----------------- - ---- ------- ------- -- ---------- ---------------- ------- ------- ------- -- ----------------- -- ------- --- ------------------ -- ----- ---------------- - ------------------------- - -------------------- ------- ------- -- -------------- -- ----- ----------- - ----------------- ------ ---------------- -- ------ ------- -----------
在上述代码中，我们通过 combineReducers 将 todos 和 visibilityFilter 两个 reducer 合并为一个 rootReducer。使用方式和 Redux 官方库的 combineReducers 差不多，只是将 createReducer 支持的映射关系对象作为 combineReducers 的参数即可。
withInitialState
有时，我们需要在不同 action 中共享同样的初始状态。这时，我们可以使用 withInitialState 高阶函数，结束初始状态的设置过程。
-- -------------------- ---- -------
------ -------------- - ---------------- - ---- ---------------------
----- --------- - -
----- ------------
-------- -
---- -
-
-
----- --------- - -
----- ------------
-------- -
---- -
-
-
----- ---------------- - ------------------ ------ - ------------------
----------------- ------- ------- -- -
------ -
---------
------ ----------- - ------------------
-
-
---
----- ---------------- - ------------------ ------ - ------------------
----------------- ------- ------- -- -
------ -
---------
------ ----------- - ------------------
-
-
---
------ -
-----------------
----------------
-上述代码中，我们通过 withInitialState 高阶函数包裹 createReducer，为 reducer 指定了一个初始状态。在 dispatch 之前，我们获取初始状态。但是，最终的 reducer 函数中并没有使用 initialstate。相反，我们只需要关注处理 action type 的逻辑，而不需要指定任何状态的更新方式。
withNamespace
当 reducer 逻辑变得更加复杂时，我们还需要为每个 reducer 命名空间加前缀标示符。这时可以使用 withNamespace 高阶函数，在每个 reducer 上添加前缀。
-- -------------------- ---- ------- ------ -------------- - ------------- - ---- --------------------- ----- ------------ - - ------ - - ----- --------- - - ----- ----------- - ----- --------- - - ----- ----------- - ----- --------- - ----------- ----- ------- - ---------------------------------------------------- - ----------------- ------- -- -- --------- ------ ----------- - - --- ----------------- ------- -- -- --------- ------ ----------- - - -- --- ------ ------- -------
在上述代码中，我们使用 withNamespace 函数给 reducer 添加了一个名为 myCounter 的命名空间。因此，最终 reducer 处理的 action 类型为myCounter/INCREMENT 和 myCounter/DECREMENT（前缀值为 myCounter）。
总结
通过本文，我们可以看出，create-reduxreducer 是一个功能丰富的 npm 包。除了简单的 action 和 reducer 映射关系外，它还提供了其他一些高效的方案，可以让我们更快速地创建和管理 reducer。
create-reduxreducer 的代码放在 github 上，推荐给大家：create-reduxreducer。相信了解了 create-reduxreducer 的基本使用和高级用法后，你可以在 Redux 状态管理中更加得心应手，少写一些重复代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd881e8991b448da776