Redux 是一个流行的 JavaScript 应用程序状态管理库，它提供了一种可预测的状态管理模式，使得应用程序状态更加可控和可维护。Redux 的核心概念包括 store、action 和 reducer，本文将对这三个概念进行详细解释，并提供示例代码进行说明。
1. Store
Redux 的 store 是一个包含应用程序状态的对象。它是唯一的，整个应用程序的状态都存储在这个对象中。store 对象包含以下方法：
- getState()：获取 store 中的当前状态。
- dispatch(action)：将一个 action 分发到 store，以更新状态。
- subscribe(listener)：添加一个监听函数，当 store 中的状态发生变化时调用。
下面是一个简单的示例代码，展示了如何创建一个 Redux store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在这个示例代码中，我们首先定义了一个初始状态 initialState，它包含一个名为 count 的属性，初始值为 0。然后，我们定义了一个 reducer 函数，它接收一个状态对象和一个 action 对象作为参数，根据 action 的类型更新状态。最后，我们使用 createStore 方法创建了一个 Redux store，并将 reducer 函数作为参数传递给它。
2. Action
Redux 的 action 是一个普通的 JavaScript 对象，它描述了发生了什么事情。action 对象必须包含一个 type 属性，用于描述事件类型。除此之外，action 对象可以包含任意其他属性，用于传递事件相关的数据。
下面是一个示例代码，展示了如何创建一个 Redux action：
const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };
const addAction = { type: 'ADD', payload: { value: 10 } };在这个示例代码中，我们创建了三个 Redux action，分别是增加计数器、减少计数器和添加一个值为 10 的数值。其中，增加计数器和减少计数器的 action 只包含 type 属性，而添加数值的 action 还包含一个 payload 属性，用于传递数值。
3. Reducer
Redux 的 reducer 是一个纯函数，它接收一个状态对象和一个 action 对象作为参数，根据 action 的类型更新状态。reducer 函数必须返回一个新的状态对象，而不能修改原来的状态对象。
下面是一个示例代码，展示了如何创建一个 Redux reducer：
-- -------------------- ---- -------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
---- ------
------ - ------ ----------- - -------------------- --
--------
------ ------
-
-在这个示例代码中，我们定义了一个 reducer 函数，它根据 action 的类型更新状态。当 action 的类型为 INCREMENT 时，计数器加 1；当 action 的类型为 DECREMENT 时，计数器减 1；当 action 的类型为 ADD 时，计数器加上 action.payload.value 的值。最后，我们使用一个初始状态 initialState 创建了 reducer 函数。
总结
Redux 是一个强大的 JavaScript 应用程序状态管理库，它的核心概念包括 store、action 和 reducer。store 是一个包含应用程序状态的对象，action 是一个描述发生了什么事情的普通 JavaScript 对象，reducer 是一个纯函数，根据 action 的类型更新状态。通过这三个概念的协作，我们可以实现可预测的状态管理模式，使得应用程序状态更加可控和可维护。
希望本文能为大家提供一些关于 Redux 的帮助和指导。如果您还有其他问题或需要更深入的学习，请参考 Redux 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663197a1d3423812e4f4e29b