React 是当今前端开发领域最受欢迎的 JavaScript 库之一。它提供了一种组件化的开发方式，让开发者可以更加便捷和高效地构建用户界面。
在 React 中，为了方便地管理状态，并且实现组件之间的数据共享，我们可以使用 Redux 这个强大的状态管理库。
Redux 是什么？
Redux 是一个 JavaScript 库，它可以帮助我们管理应用程序的状态。它通过一些简单的约定，让我们可以直接在组件之间共享状态，并且能够方便地进行状态的修改和监听。
在 Redux 中，有三个重要的概念：store、action 和 reducer。
Store
Store 是一个容纳应用程序状态的地方。它是一个对象，保存整个应用程序状态的树状结构。
在 Redux 中，我们可以通过 createStore 方法来创建一个 store，示例代码如下：
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------上述代码中，我们首先定义了一个初始状态 initialState，包含了一个名为 count 的属性，它的初始值为 0。然后，我们定义了一个 reducer 函数 counter，根据不同的 action.type 返回不同的新状态对象。
最后，我们使用 createStore 方法来创建一个名为 store 的 Redux store。这个 store 包含了我们定义的 reducer 函数以及初始状态 initialState。
Action
Action 是一个描述应用程序中发生变化的普通对象。它应该具有一个 type 属性，指示发生了什么变化。
在 Redux 中，我们可以通过创建 action 来描述应用程序中的事件和变化。示例代码如下：
----- --------------- - - ----- ----------- -- ----- --------------- - - ----- ----------- --
上述代码中，我们分别定义了两个 action，一个是增加计数器的 incrementAction，另一个是减去计数器的 decrementAction。
Reducer
Reducer 是一个函数，它负责根据 action 来计算并返回新的应用程序状态。
在 Redux 中，我们可以通过 reducer 来管理应用程序状态的变化。示例代码如下：
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-上述代码中，我们定义了一个名为 counter 的 reducer 函数，它接收两个参数，state 和 action。根据不同的 action.type，它会返回新的应用程序状态。
Redux 的使用方法
在 React 中使用 Redux，需要遵循以下步骤：
- 创建 Redux store
- 在 React 组件中访问和修改 Redux store 中的状态
- 引入 Redux Provider 和 connect 组件
创建 Redux store
我们可以使用 createStore 方法来创建 Redux store。示例代码如下：
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在上述代码中，我们首先定义了一个初始状态 initialState 和一个名为 counter 的 reducer 函数。然后，我们使用 createStore 方法来创建一个名为 store 的 Redux store。
访问和修改 Redux store 中的状态
在 React 组件中，我们可以通过 mapStateToProps 方法来访问和修改 Redux store 中的状态。示例代码如下：
------ ----- ---- --------
------ - ------- - ---- --------------
-------- -------------- -
-------- ------------- -
---------------- ----- ----------- ---
-
-------- ------------- -
---------------- ----- ----------- ---
-
------ -
-----
--------- -----------------
------- ----------------------------------------
------- ----------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ----------------------------------在上述代码中，我们首先定义了一个名为 Counter 的组件，并在组件中定义了两个方法 onIncrement 和 onDecrement，用于增加和减小计数器的值。注意，这两个方法不是直接修改状态，而是通过 dispatch 发送 action。
接着我们使用 mapStateToProps 方法连接组件和 Redux store，从而可以访问和修改 Redux store 中的状态。
引入 Redux Provider 和 connect 组件
最后，我们需要在组件树最顶层引入 Redux Provider 组件，并使用 connect 方法连接 React 组件和 Redux store。示例代码如下：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ------- ---- ------------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
----------------
--------- --------------
-------- --
------------
-------------------------------
--上述代码中，我们首先引入了 Redux Provider 组件，它可以让包含在内的组件访问到 Redux store 中的状态。
接着我们创建了 Redux store，并使用 connect 方法将 Counter 组件和 Redux store 连接起来。
最后，我们使用 ReactDOM.render 方法将 Provider 组件作为组件树的根组件，并将 Counter 组件作为其子组件进行渲染。这样，我们就可以访问和修改 Redux store 中的状态了。
总结
在本文中，我们详细介绍了 React 中 Redux 的使用方法。我们了解了 Redux 的三个核心概念：store、action 和 reducer，并示范了如何在 React 组件中使用 Redux。
Redux 为我们提供了一个可以跨组件共享状态的途径，让产品开发更加高效和清晰。深入掌握 Redux 的使用方法，有助于我们更好地理解复杂应用程序的结构和交互。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66543bbfd3423812e48d62b9