前言
随着前端开发的不断发展，越来越多的应用开始采用 JavaScript 来构建。而 React 作为目前最流行的前端框架之一，已经被广泛使用和赞誉。但是，React 的状态管理机制却非常简陋，只能在组件内部进行状态管理，很难处理全局状态和多个组件之间的状态同步。因此，在这种情况下，Redux 诞生了。Redux 是一个独立于 React 的状态管理库，它让你的应用状态在一处被管理，解决了 React 状态问题。
Redux 的核心概念
Redux 的核心围绕三个概念：store、action 和 reducer。
store：Redux 中的 store 相当于应用的状态仓库，用来存储整个应用的状态。它负责暴露 getState、subscribe 和 dispatch 这三个方法。原则上，Redux 中只有一个 store，因为它存储了整个应用的状态。
action：Redux 中的 action 是一个对象，它指示发生了什么类型的事件。Action 由 type 字段和 payload 字段组成，type 字段用来表示事件类型，payload 字段用来表示事件数据。
reducer：Redux 中的 reducer 是一个纯函数，它接收一个 state 和一个 action，并返回一个新的 state。Reducer 根据传入的 action 类型，来决定如何更新 state。
在 Redux 中，我们只在 store 中调用三个方法：dispatch、subscribe 和 getState。
Redux 示例
让我们进入实际代码，来看一下 Redux 如何工作。在本次示例中，我们将搭建一个简单的计数器应用。该应用有两个组件：Count 和 Control。Count 组件用来渲染计数器的数量，而 Control 组件为我们提供两个按钮，分别用来增加和减少计数器。
安装
在开始之前，需要在你的项目中安装 Redux 和 React-Redux。你可以通过如下命令来完成安装：
--- ------- ----- -----------
创建 store
我们首先创建一个 store.js 文件来定义 Redux 的 store：
------ - ----------- - ---- --------
----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ----------------------------
------ ------- ------上面的代码定义了一个计数器 reducer，它接收一个 state 和一个 action，并返回一个新的 state。当需要增加计数器时，我们会将 state.count 加一。当需要减少计数器时，我们会将 state.count 减一。如果 state 中不存在 count 字段，则默认为 0。
store.js 文件中的 createStore 函数是用于创建 Redux store。我们传递一个 reducer 给 createStore，它将返回一个 store 对象。现在我们已经定义了一个 store，下一步是如何与 React 集成。
创建 React 组件
我们定义了两个组件：Count 和 Control。
------ ----- ---- -------- ------ - ------- - ---- -------------- ----- ----- - -- ------- -- -- - ------ --------------------- -- ----- --------------- - ------- -- -- -------- ------------ --- ------ ------- --------------------------------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ---------- --------- -- -- -
------ -
-----
------- ------------------------------
------- ------------------------------
------
--
--
----- ------------------ - ---------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
---
------ ------- ------------- -----------------------------在 Count 组件中，我们使用了 connect 方法来连接 store 和组件。我们定义了一个 mapStateToProps 函数，它将 store 中的 count 属性映射到组件的 props 上。在 mapDispatchToProps 函数中，我们定义了 increment 和 decrement 来更新计数器的值。connect 方法接受两个参数(mapStateToProps 和 mapDispatchToProps)，并返回一个新的、已连接好 store 的 Count 组件。
Control 组件中和 Count 组件大同小异。不同之处在于，我们定义了两个按钮，分别用来增加和减少计数器。当点击这些按钮时，调用 mapDispatchToProps 中的方法，更新 store 中的 state。最后，我们也将 Control 组件通过 connect 方法连接到 store。现在，我们已经定义了两个组件，并让它们与 store 集成。下面的步骤是将它们渲染到屏幕上。
渲染 React 组件
在 App.js 文件中，我们渲染了 Count 组件和 Control 组件：
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ----- ---- ---------------------
------ ------- ---- -----------------------
----- --- - -- -- -
------ -
--------- --------------
------ --
-------- --
-----------
--
--
------ ------- ----我们使用了 进行了如下：
- 导入 Provider 组件。
- 从之前定义的 store.js 文件中导入 store。
- 导入之前定义的 Count 组件和 Control 组件。
- 在 App 组件中使用 Provider，传递 store 作为其 props。
- 渲染 Count 组件和 Control 组件。
我们已经完成了所有步骤，现在可以运行我们的应用。
运行应用
现在，我们已经完成了整个应用的构建，并将其渲染出来。你可以使用如下命令在浏览器中访问应用：
--- -----
运行应用后，你会看到计数器应用已经启动并可以使用。在点击增加或减少按钮时，计数器的值会相应改变。
结论
我们已经成功地构建了一个用于展示如何使用 Redux 的计数器应用。在实现过程中，我们了解了 Redux 的核心概念和用法，以及如何使用 connect 方法将 React 组件与 Redux store 进行连接。此外，我们了解了如何定义 combineReducers 和 applyMiddleware，在更复杂的应用中，这些会变得非常有用。
Redux 的出现能帮助 React 处理全局状态，并更好地解决组件之间的状态同步问题。如果您正在处理一个大型应用程序并且 React 中的状态管理开始变得僵化，Redux 可以是您的下一个选择。它不仅适用于 React，而且可以与任何 JavaScript 应用程序集成。希望本篇文章可以对你了解 Redux 的概念和使用方法有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67161df0ad1e889fe21adf7b