在使用 React 进行大型应用开发时，一个重要的问题是如何管理组件状态。在 React 中，我们通常使用 props 和 state 来管理组件状态。但是，当应用规模变得越来越大时，组件之间的状态传递会变得非常复杂。这时候，我们需要一个更好的状态管理方案，这就是 Redux。
Redux 是一个 JavaScript 应用程序状态容器，它可以让你更好地管理应用程序的状态。它可以让你轻松地管理全局的状态，并使组件之间的状态传递更加简单。
Redux 的核心概念是 store、action 和 reducer。
Store
在 Redux 中，store 是应用程序状态的单一来源。它是一个 JavaScript 对象，包含了应用程序的所有状态。Redux 应用程序中只有一个 store。
在创建 store 时，我们需要传入一个 reducer 函数。这个 reducer 函数接收两个参数：当前的状态和一个 action 对象。根据 action 对象的 type 属性，reducer 函数会返回一个新的状态。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - ---------------------在上面的代码中，我们创建了一个名为 reducer 的函数，它接收当前的状态和一个 action 对象，并根据 action 对象的 type 属性返回一个新的状态。我们还创建了一个名为 store 的变量，它是通过调用 createStore 函数创建的。createStore 函数接收一个 reducer 函数作为参数，并返回一个新的 store 对象。
Action
在 Redux 中，action 是一个描述应用程序状态变化的普通 JavaScript 对象。它必须包含一个 type 属性，用于描述状态变化的类型。除此之外，action 对象可以包含任何其他属性，用于描述状态变化的详细信息。
const incrementAction = {
type: 'INCREMENT',
};
const decrementAction = {
type: 'DECREMENT',
};在上面的代码中，我们创建了两个 action 对象。它们的 type 属性分别为 INCREMENT 和 DECREMENT。
Reducer
在 Redux 中，reducer 是一个纯函数，它接收当前的状态和一个 action 对象，并根据 action 对象的 type 属性返回一个新的状态。
-- -------------------- ---- -------
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-在上面的代码中，我们创建了一个名为 counterReducer 的纯函数。它接收当前的状态和一个 action 对象，并根据 action 对象的 type 属性返回一个新的状态。在这个例子中，我们只处理了两种类型的 action：INCREMENT 和 DECREMENT。对于其他类型的 action，我们直接返回当前的状态。
Connect
在 React 应用程序中，我们可以使用 connect 函数将组件连接到 Redux store。connect 函数接收两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps 函数用于将 store 中的状态映射到组件的 props 中。它接收一个 state 参数，代表当前的 store 状态。mapStateToProps 函数返回一个对象，这个对象的属性将会被添加到组件的 props 中。
mapDispatchToProps 函数用于将 action 创建函数映射到组件的 props 中。它接收一个 dispatch 参数，代表 Redux store 的 dispatch 方法。mapDispatchToProps 函数返回一个对象，这个对象的属性将会被添加到组件的 props 中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
------ ------- ------------------------ -----------------------------在上面的代码中，我们创建了一个名为 Counter 的组件，并使用 connect 函数将它连接到 Redux store。我们还创建了两个函数 mapStateToProps 和 mapDispatchToProps，用于将 store 中的状态和 action 创建函数映射到组件的 props 中。
总结
Redux 是一个非常强大的状态管理库，它可以让我们更好地管理应用程序的状态。它的核心概念是 store、action 和 reducer。在 React 应用程序中，我们可以使用 connect 函数将组件连接到 Redux store，并将 store 中的状态和 action 创建函数映射到组件的 props 中。
在开发 React 应用程序时，我们应该尽可能地使用 Redux 来管理组件状态。这可以让我们的代码更加简洁、可维护性更高。当然，我们也要注意避免过度使用 Redux，因为过度使用 Redux 可能会导致代码复杂度增加，不利于代码的维护。
完整示例代码：https://github.com/xxx/xxx
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ff772cd10417a222a9ca04