前言
redux-standard-reducers 是一个用于 Redux 应用中创建标准 reducer 的 npm 包。它可以让你更加容易地编写 reducer,并使得 reducer 的代码更加易懂。
本文将介绍 redux-standard-reducers 的使用方法,包含详细的示例代码。
安装
npm install redux-standard-reducers --save
基本用法
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