在前两篇文章中，我们已经学习了 Redux 的基本概念和使用方法，以及如何设计 actions。在这篇文章中，我们将深入探讨 Redux 的另一个核心概念：reducers。
什么是 reducers
Reducers 是 Redux 中的一个重要概念，用于描述应用程序状态的变化。它们是纯函数，接收当前状态和一个 action，返回一个新的状态。Reducers 的设计原则是不修改任何传入的参数，而是返回一个新的状态对象。
Reducers 的作用是将 action 和当前状态合并成一个新的状态。每个 reducer 都是一个纯函数，它只处理与其相关的部分状态，并返回一个新的状态对象。Redux 中的状态是不可变的，这意味着我们不能直接修改状态，而是要通过 reducer 来修改。
Reducers 的命名通常以其所处理的状态属性名称为前缀，例如 todosReducer 或 visibilityFilterReducer。
如何设计 reducers
Reducers 的设计是 Redux 中的一个重要部分。在设计 reducers 时，我们需要考虑以下几个方面：
1. 初始状态
我们需要定义应用程序的初始状态。这可以是一个对象，也可以是一个数组，具体取决于应用程序的结构和需要。
const initialState = {
todos: [],
visibilityFilter: 'SHOW_ALL'
};2. 处理 actions
Reducers 负责处理 actions，并根据它们返回一个新的状态。我们可以使用 switch 语句来处理不同的 actions。
-- -------------------- ---- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
-
---- --------------
------ -------------- --
-------- --- ----------
- --------- ---------- ----------------
- ----
-
--------
------ -----
-
-3. 不可变性
Reducers 必须是纯函数，不得修改传入的参数。因此，我们需要使用不可变性来确保返回一个新的状态对象。
-- -------------------- ---- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
-
---- --------------
------ -------------- --
-------- --- ----------
- --------- ---------- ----------------
- ----
-
--------
------ -----
-
-4. 组合 reducers
在实际应用中，我们通常需要处理多个状态。为了管理这些状态，我们可以将多个 reducers 组合成一个根 reducer。
-- -------------------- ---- ------- ------ - --------------- - ---- ------- ------ ------------ ---- ---------------- ------ ----------------------- ---- --------------------------- ----- ----------- - ----------------- ------ ------------- ----------------- ----------------------- -- ------ ------- -----------
示例代码
下面是一个简单的示例代码，演示如何设计 reducers。
-- -------------------- ---- -------
-- ----
----- ------------ - -
------ ---
----------------- ----------
--
-- -- -----
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
-
---- --------------
------ -------------- --
-------- --- ----------
- --------- ---------- ----------------
- ----
-
--------
------ -----
-
-
-- -- ----------------
-------- ----------------------------- - ----------- ------- -
------ ------------- -
---- ------------------------
------ -------------
--------
------ -----
-
-
-- -- --------
------ - --------------- - ---- -------
----- ----------- - -----------------
------ -------------
----------------- -----------------------
--
-- -- -----
------ - ----------- - ---- -------
----- ----- - ------------------------
-- -- -------
----------------------------- --------
-----------------------------
-----------------------------------------------------总结
在 Redux 中，reducers 是一个非常重要的概念。它们负责处理 actions，并根据它们返回一个新的状态。Reducers 必须是纯函数，不得修改传入的参数。在实际应用中，我们通常需要处理多个状态，为了管理这些状态，我们可以将多个 reducers 组合成一个根 reducer。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650b8ff595b1f8cacd5a12ea