npm 包 redux-standard-reducers 使用教程

阅读时长 7 分钟读完

前言

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 的实现更加简单和可读。

  1. 基于关键字的 reducer

redux-standard-reducers 通过 createReducerFromMap 函数提供了基于关键字的 reducer。该函数接受一个对象作为参数,该对象将 action 作为键和处理程序函数作为值。

例如,以下代码将使用 BOOKS_LOADING 和 BOOKS_LOADED 类型创建两个处理程序:

-- -------------------- ---- -------
----- -------- - -
  ---------------- ----- -- --
    ---------
    -------- -----
  ---

  --------------- ------- ------- -- --
    ------------------------------------- --------
    -------- ------
  ---
--

----- ----- - ------------------------------ -------------------
  1. 基于嵌套的 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

纠错
反馈