Redux 是一个非常流行的 JavaScript 状态管理库，它可以帮助我们更好地管理应用程序的状态。在 Redux 中，有三个核心概念：Actions、Reducers 和 Store。本文将详细介绍这三个概念，帮助你更好地理解 Redux 并在实际开发中使用它。
Actions
Action 是一个对象，用于描述发生了什么事情。它包含一个 type 属性和一些其他属性，这些属性可以用于描述发生的事件。例如，我们可以创建一个 ADD_TODO 的 Action，来描述当用户添加一个新的待办事项时发生的事件。
----- -------- - ----------- ----- ------------- - - ----- --------- ----- ------ ------- ---------- ----- --
在这个例子中，ADD_TODO 是一个字符串常量，用于描述 Action 的类型。addTodoAction 是一个 Action 对象，它包含了 type 属性和其他属性，用于描述添加待办事项的事件。
Reducers
Reducer 是一个函数，用于处理 Action 并更新应用程序的状态。它接收两个参数：当前状态和一个 Action 对象。Reducer 根据 Action 的类型来决定如何更新状态，并返回一个新的状态对象。
例如，我们可以创建一个 Reducer 来处理 ADD_TODO Action，并在状态中添加一个新的待办事项。
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
----- ------------
---------- ----------------
-
-
--
--------
------ ------
-
-在这个例子中，initialState 是一个包含 todos 属性的对象，用于描述应用程序的初始状态。todoReducer 是一个处理 ADD_TODO Action 的 Reducer 函数。当接收到 ADD_TODO Action 时，它会创建一个新的状态对象，其中包含了一个新的待办事项。如果接收到其他类型的 Action，则返回当前状态对象。
Store
Store 是一个包含状态和 Reducer 的对象。它是 Redux 应用程序的中心，用于管理应用程序的状态。Store 提供了一些方法，用于更新状态、订阅状态的变化以及取消订阅。
例如，我们可以创建一个 Store 来管理待办事项的状态并使用 todoReducer 处理所有的 Action。
------ - ----------- - ---- -------- ----- ----- - -------------------------
在这个例子中，createStore 是一个 Redux 提供的函数，用于创建一个新的 Store 对象。我们将 todoReducer 作为参数传递给 createStore 函数，用于处理所有的 Action。现在，我们可以使用 Store 的一些方法来更新状态、订阅状态的变化以及取消订阅。
-- ---- ---------------- ----- --------- ----- ------ ------- ---------- ----- --- -- ------- ------------------ -- - ------------------------------ --- -- ---- ----- ----------- - ------------------ -- - ------------------------------ --- --------------
在这个例子中，我们使用 store.dispatch 方法来更新状态，将一个新的 ADD_TODO Action 发送到 Store 中。我们还使用 store.subscribe 方法来订阅状态的变化，并在状态变化时打印状态对象。最后，我们使用 unsubscribe 函数取消订阅。
总结
在 Redux 中，Actions、Reducers 和 Store 是三个核心概念。Actions 用于描述发生了什么事情，Reducers 用于处理 Action 并更新状态，Store 是管理状态的中心。理解这三个概念并合理使用它们，可以帮助我们更好地管理应用程序的状态并提高开发效率。
示例代码：https://codesandbox.io/s/redux-example-9c2v1
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66182c74d10417a22284b070