如何在 Redux 中处理同一 Action 多个 Reducer 返回值的问题

阅读时长 5 分钟读完

在 Redux 中,Reducer 是用来更新应用程序的状态的纯函数。当一个 Action 被触发时,Redux 会将该 Action 传递给所有的 Reducer,每个 Reducer 都会根据自己的逻辑来处理 Action,并返回新的状态。但是,有时候我们需要在一个 Action 被触发时,多个 Reducer 都返回值,这时该如何处理呢?

解决方案

Redux 提供了一个 combineReducers 函数,该函数可以将多个 Reducer 合并成一个 Reducer。当一个 Action 被触发时,combineReducers 函数会将该 Action 传递给所有的 Reducer,每个 Reducer 都会根据自己的逻辑来处理 Action,并返回新的状态。最终,combineReducers 函数会将所有 Reducer 的返回值合并成一个对象,该对象代表了整个应用程序的状态。

示例代码

假设我们有两个 Reducer,分别用来处理用户信息和商品信息:

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

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

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

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

现在,我们需要在一个 Action 被触发时,同时更新用户信息和商品信息。我们可以使用 combineReducers 函数将两个 Reducer 合并成一个 Reducer:

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

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

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

然后,在我们的组件中使用该 Reducer:

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

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

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

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

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

当用户点击按钮时,Redux 会将 SET_USER_AGE 和 SET_PRODUCT_NAME Action 分别传递给 userReducer 和 productReducer,这两个 Reducer 都会返回新的状态。最终,combineReducers 函数会将这两个状态合并成一个对象,该对象代表了整个应用程序的状态。

总结

在 Redux 中,使用 combineReducers 函数可以解决同一 Action 多个 Reducer 返回值的问题。我们可以将多个 Reducer 合并成一个 Reducer,然后在组件中使用该 Reducer 来更新应用程序的状态。这种方式使得我们的代码更加模块化和可维护,同时也避免了多个 Reducer 之间的命名冲突。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/660e5042d10417a222ed3673

纠错
反馈