前言
redux-standard-reducers 是一个用于 Redux 应用中创建标准 reducer 的 npm 包。它可以让你更加容易地编写 reducer，并使得 reducer 的代码更加易懂。
本文将介绍 redux-standard-reducers 的使用方法，包含详细的示例代码。
安装
--- ------- ----------------------- ------
基本用法
redux-standard-reducers 通过创建标准的 reducer 来简化开发人员的工作。你只需要定义最初的 state，以及你需要处理的 action，它将自动处理其他的步骤。
------ --------- ---- -------------
------ - -------- - ---- --------------------------
----- ----------------- - -
-----------------------------------
-------- ------
------- ---
--
----- ----- - --------------------------- -
---------------- ----- -- --
---------
-------- -----
---
--------------- ------- ------- -- --
------------------------------------- --------
-------- ------
---
--------------- ------- ------- -- --
---------------------------------- --------
------- --------------
-------- ------
---
---此代码使用了 redux-crud 的 initialState 函数来创建最初的 state。在此基础上，它添加了 loading 和 errors 属性。
然后，使用标准函数来创建 reducer。标准函数需要两个参数：初始状态和处理的 action。对于每个 action 类型，您需要返回一个新的状态。
例如，在此示例中，BOOKS_LOADING，BOOKS_LOADED 和 BOOKS_FAILED 是 action 类型。标准函数为每个 action 类型定义一个处理程序。
BOOKS_LOADING 处理程序将 loading 属性设置为 true。BOOKS_LOADED 处理程序调用 reduxCrud 的 queries.succeeded 函数，并将其结果（更新的状态）与 loading 属性合并。BOOKS_FAILED 处理程序类似，但它使用的是 queries.failed 函数，同时添加了错误信息。
这些不是固定的触发器，应该根据不同的应用场景进行不同的更改。
进阶用法
除了创建标准的 reducer 之外，redux-standard-reducers 还提供了一些高级功能，使得 reducer 的实现更加简单和可读。
- 基于关键字的 reducer
redux-standard-reducers 通过 createReducerFromMap 函数提供了基于关键字的 reducer。该函数接受一个对象作为参数，该对象将 action 作为键和处理程序函数作为值。
例如，以下代码将使用 BOOKS_LOADING 和 BOOKS_LOADED 类型创建两个处理程序：
----- -------- - -
---------------- ----- -- --
---------
-------- -----
---
--------------- ------- ------- -- --
------------------------------------- --------
-------- ------
---
--
----- ----- - ------------------------------ -------------------- 基于嵌套的 reducer
redux-standard-reducers 还提供了基于嵌套的 reducer 功能，使得处理大型嵌套 state 的 reducer 更加容易。
例如，以下代码将 booksReducer 包装在 authorReducer 中，以便更容易地处理与作者相关的数据：
----- ------------------ - -
-------------------------------------
-------- ------
------- ---
--
----- -------------- - -
------------------ ----- -- --
---------
-------- -----
---
----------------- ------- ------- -- --
------------------------------------- --------
-------- ------
---
----------------- ------- ------- -- --
---------------------------------- --------
------- --------------
-------- ------
---
--------------- ------- ------- -- --
---------
-------------------------- ------------------------------------- --------
---
--
----- ------ - ---------------------------- ----------------
----- ------------ - - ----------------------- ------ -- --
----- ----------- - -----------------
------- ---------------
------ --------------------------------- ------------- -
- ------- --------------- ---- ---------- --
---
---在此示例中，我们定义了一个 authorHandlers 对象，其中包含处理 AUTHORS_LOADING，AUTHORS_LOADED 和 AUTHORS_FAILED 类型的 action 的处理程序。它还包含处理 BOOKS_LOADED 类型的 action 的处理程序，该处理程序在 booksReducer 上调用标准 reducer。
为了使其正常工作，我们创建了一个包含 books 状态的 initialState 对象，并使用 createNestedReducerFromMap 函数将 booksReducer 包含在 authorReducer 中。这里，我们指定了将 BOOKS_LOADED action 映射到 authorId 属性，并调用 booksReducer 来更新该元素。
可以通过定义更多的嵌套来扩展嵌套 reducer 功能。
总结
redux-standard-reducers 是一个非常有用的 npm 包，可以使开发人员更加容易地编写 reducer。它提供了基于关键字的 reducer 和基于嵌套的 reducer，使 reducer 的代码更加可读和易于维护。
在实际项目中，我们可以按照业务场景中的需求进行相关修改。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575c581e8991b448ea745