在现代前端应用程序开发中，我们通常会使用 React 来构建我们的应用程序的视图层。React 是一个灵活且高效的库，但是管理大规模的状态非常棘手。这时，Redux 可以帮助我们轻松管理此类情况。
Redux 是一个轻量级、可预测的状态容器，它使得在 React 应用程序中管理状态变得容易。通过将状态集中存储在单个状态库（即 store）中，我们可以轻松管理应用程序的状态变化，并且更容易在应用程序中进行测试。
安装和配置 Redux
在开始使用 Redux 之前，您需要使用 npm 或 yarn 安装 Redux：
--- ------- ------ -----
或者
---- --- -----
Redux 使用单一的 store 来存储整个应用的状态。首先，我们需要创建一个 store。在 React 应用程序中，通常在根组件中创建 store。假设我们有一个 App 组件，并且想要使用 Redux，可以按照以下步骤进行设置：
注意： 在本文中，我们将使用一个基本的计数器应用程序作为示例项目。你可以克隆或下载示例代码 React-Redux-Counter 进行参考。
- 首先，需要在准备工作中导入必要的库：
------ ----- ---- -------- ------ -------- ---- ------------ ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- ------ -------------- ---- ---------------------------- ------ ------- ---- -----------------------
其中，createStore 是 Redux 提供的一个函数，用于创建 store。Provider 组件是 React-Redux 提供的，用于将 Redux store 传递下去。counterReducer 是一个用于更新 state 的 reducer 函数，我们将在下面介绍它。
- 然后，创建 Redux store，将
counterReducer作为参数传递给它，并将其传递给Provider组件：
----- ----- - ----------------------------
----------------
--------- --------------
-------- --
------------
-------------------------------
--- 在 Counter 组件中，我们可以通过
connect函数来连接到 Redux store，将它连接到组件的 props。这样，我们就可以将应用程序的状态存储在 Redux store 中，以便访问和更新。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -------------
----- ------- ------- --------------- -
--------- - -- -- -
-----------------------
--
--------- - -- -- -
-----------------------
--
-------- -
----- - ----- - - -----------
------ -
-----
----------------
-----
------- -----------------------------------
--------------------
------- -----------------------------------
------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- ------------------------ - ---------- --------- ------------这里我们有两个 action：increment 和 decrement，它们用于更新 Redux store 中的数据。mapStateToProps 函数用于将数据从 store 映射到组件的 props 上。
数据流
在 Redux 应用程序中，数据的流动非常简单。组件可以通过 dispatch 发送 action，然后该 action 会被接收并处理，最后，在 reducer 中更新状态。
通常，在 React-Redux 应用程序中，Redux store 只是保存了组件所需的最小数据，并且并不需要将完整的状态对象传递给每个组件。相反，你可以使用选择器函数，将 store 中的子树（或数据片段）映射到组件的 props 上。这样，每个组件只关心它们需要的那些数据，而不是所有的状态。
Reducer
Reducer 是 Redux 中最重要的一环，它们负责更新应用程序的状态。Reducer 可以看作是一个状态机，接收先前的状态和将要执行的 action，然后返回新的状态。
假设我们有一个用于处理计数器逻辑的 reducer，如下所示：
----- ----------- - -
------ -
--
----- -------------- - ------ - ------------ ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
------ ------- ---------------在这个 reducer 中，我们初始化了一个 state 对象，简单的包含一个 count 属性，并提供了两个 action：INCREMENT 和 DECREMENT。当接收到这些 action 时，reducer 将更新 count 的值，并返回一个新的 state 对象。否则，原始 state 对象将返回。
Action
Action 是 Redux 中的另一个重要概念，它们是描述应用程序发生的事情的简单对象。例如，当用户点击增加计数器按钮时，我们会发出一个 action，如下所示：
----- --------- - -- -- -- ----- ------------ ---
这将简单地返回一个对象，包含一个类型属性，以确定将要执行哪个操作。还可以包含其它属性，例如附加数据。这取决于你正在构建的应用程序类型。
结论
Redux 提供了一种简单而有效的方式来管理 React 应用程序中的状态。通过单一的 store 和纯函数的 reducer，我们可以轻松地管理和更新数据。使用 connect 函数将 store 连接到组件上，即可实现 React-Redux 应用程序中状态管理的无缝绑定。希望本文可以让你更好的理解如何构建一个更好的 React 应用程序。
示例代码： React-Redux-Counter
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6738033f317fbffedf0db23f