Redux 是一个流行的前端状态管理工具。它通过一个单一的状态树来管理应用程序的状态，使得应用程序的状态变化更加可预测和容易管理。State 是 Redux 中的核心概念，它包含了应用程序的所有状态。本文将详细解析 Redux 中 State 的变化和更新方式。
State 是如何变化的
Redux 中的 State 是不可变的，这意味着变化不会在原始对象上进行，而是通过创建新的对象来表示新的状态。这种不可变性确保了 Redux 中的状态是可预测和可控的。
Redux 中的 State 可以通过 Action 来改变。Action 是一个对象，其中包含一个 type 属性和一个可选的 payload 属性。type 属性指定了 Action 的类型，描述了 Action 的目的。payload 属性包含了 Action 的数据。
当 Redux 应用程序中的某个组件需要改变 State 时，它会 dispatch 一个 Action。redux-thunk 或 redux-saga 等中间件可以帮助处理异步代码。当 Action 被 dispatch 时，Redux 会调用 reducer 函数。
Reducer 是一个纯函数，接受当前 State 和 Action 作为参数，并返回一个新的 State。这个新的 State 是经过创建的，基于原始 State 和 Action。
以下是一个简单的 Redux 应用程序的示例代码：
-- -------------------- ---- -------
-- -----
----- ------------ - -
------ -
--
-- ------- --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
-
-- -- -----
----- ----- - ----------------------------
-- -------- ------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---在上述代码中，我们首先定义了一个包含 count 属性的 initialState。然后我们定义了 reducer 函数 counterReducer，接受 state 和 action 作为参数，并返回一个新的 state。在我们的 reducer 函数中，我们使用 switch 语句来处理来自不同 action types 的不同 Action。
接下来，我们使用 createStore 函数创建了一个 store，将我们的 reducer 函数作为参数传递给它。最后，我们 dispatch 了三个 Action：两个 INCREMENT 和一个 DECREMENT。
当我们 dispatch 一个 Action 时，Redux 会将它传递给我们的 reducer 函数。我们的 reducer 函数会处理 Action 并返回一个新的 State。当 State 更新时，Redux 会调用监听 State 变化的函数。
下面我们将讨论更多有关 State 更新方式的信息。
State 的更新方式
当 State 更新时，Redux 会请求更新所有与这个 State 相关的组件。这使得组件的状态和 Redux 中的状态保持同步。
Redux 中的 State 可以通过以下方式进行更新：
1. 直接更新 State
我们可以通过直接改变 State 中的属性来更新 Redux 中的状态。然而，这样做会使得 State 变得不可预测，并且 Redux 会失去对 State 变更的控制。
state.count = 5; // 这种改变状态的方式是不被推荐的
2. 使用 Object.assign()
使用 Object.assign() 函数是一种更新 State 的方法。Object.assign() 函数接受目标对象和一个或多个源对象作为参数，将所有源对象的属性复制到目标对象中。
const newState = Object.assign({}, state, { count: 5 });在上面这个例子中，我们创建了一个新的 newState，通过 Object.assign() 函数将我们的 state 和 { count: 5 } 对象进行合并。我们传递一个空对象作为目标对象，以确保返回的对象是一个新的对象。
3. 使用展开运算符
我们还可以使用 ES6 的展开运算符来更新 State。展开运算符实际上是一种替代 Object.assign() 函数的方法。
const newState = { ...state, count: 5 };在这个例子中，我们创建了一个新的 newState，通过展开运算符将我们的 state 对象展开，并将 { count: 5 } 对象与其合并。这样我们就可以得到一个新的对象，其中包含 count 属性的改变。
4. 使用 Immer 库
Immer 是一个帮助我们轻松创建不可变对象的库。它使得我们可以更加轻松地更新 State，而无需关心不可变性。
import produce from 'immer';
const newState = produce(state, draftState => {
draftState.count = 5;
});在这个例子中，我们使用 Immer 的 produce() 函数来创建一个新的 State。我们将原始 State 和一个修改函数作为参数传递给 produce() 函数。当我们在修改函数中更新 State 时，Immer 会为我们创建一个新的 State，并确保不可变性。这样我们就可以快速而轻松地更新 State，而无需担心不可预测性。
总结
Redux 的 State 是不可变的，意味着变化不会在原始对象上进行，而是通过创建新的对象来表示新的状态。当我们 dispatch 一个 Action 时，Redux 会将它传递给我们的 reducer 函数。我们的 reducer 函数会处理 Action 并返回一个新的 State。当 State 更新时，Redux 会请求更新所有与这个 State 相关的组件，使得他们的状态和 Redux 中的状态保持同步。为了更新 State，我们可以直接更新 State 属性，使用 Object.assign() 函数或 ES6 的展开运算符，也可以使用 Immer 库来快速而轻松地创建不可变对象。在 State 发生变化时，Redux 提供了一个可控和可预测的方法来管理应用程序的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4f472f6b2d6eab306ee77