Redux 核心概念详解:store、action、reducer

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:

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

在这个示例代码中,我们创建了三个 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