前言
随着前端应用越来越复杂，多个组件之间的状态管理变得越来越麻烦。如果一个组件的状态需要传递给其他组件使用，或者多个组件都需要访问同一个状态，传统的 props 传递方式可能会显得力不从心。
Redux 是一个流行的状态管理工具，它采用单向数据流的方式，管理整个应用的状态。Redux 通过集中式的存储管理状态，使得多个组件可以方便地共享状态。
在本篇文章中，我会介绍 Redux 是如何在不同组件中共享状态的，并提供一个简单的示例代码，以及一些有用的指导意义。
Redux 的基础知识
在介绍 Redux 如何在不同组件中共享状态之前，我们先来回顾一下 Redux 的基础知识。
Redux 的核心概念包括以下三个部分：
Store：整个应用的状态存储在一个单一的对象中，称为 Store。
Action：Action 是一个 JavaScript 对象，用于描述状态的变化。Action 中必须包含一个 type 属性，表示发生的事件类型。
Reducer：Reducer 是一个纯函数，用于根据 Action 更新 Store 中的状态。
Redux 单向数据流的过程如下：
用户调用 View 中的事件，View 发出一个 Action。
Action 被传到 Reducer 中，Reducer 根据 Action 更新 Store 中的状态。
Store 发生变化，触发 View 的重新渲染。
下面我们来看一下 Redux 如何在不同组件中共享状态。
如何在不同组件中共享状态？
下面我们通过一个简单的示例代码来演示 Redux 如何在不同组件中共享状态。
我们假设有两个组件：Counter1 和 Counter2，它们都需要访问同一个计数器状态。
1. 创建 Redux Store
我们首先需要创建一个 Redux Store，用于存储整个应用的状态。在创建 Store 之前，我们需要先定义一个 Reducer 函数。
-- -------------------- ---- -------
-------- -------------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-上面这个 Reducer 函数会根据不同的 Action 更新 Store 中的状态。我们通过 state.count 属性来保存计数器的值。
然后我们使用 createStore 函数创建一个 Redux Store，并将上面定义的 Reducer 函数传递给它。
import { createStore } from 'redux';
import counterReducer from './counterReducer';
const store = createStore(counterReducer);这样我们就创建好了一个存储计数器状态的 Redux Store。
2. 组件读取 Store 中的状态
现在我们需要让组件可以访问 Redux Store 中的状态。我们可以使用 connect 函数来连接组件和 Store。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ---------- ------ -------- -- -
------ -
-----
----------- -------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-
-------- ---------------------- -
------ - ------ ----------- --
-
------ ------- -----------------------------------上面的代码中，我们通过实现 mapStateToProps 函数来将 Store 中的状态映射到 Counter1 组件的 props 中。然后使用 connect 函数连接 Counter1 组件和 Redux Store。
现在 Counter1 组件就可以在 props 中访问计数器的值了。
3. 组件修改 Store 中的状态
接下来我们需要让组件可以修改 Redux Store 中的状态。组件只需要调用 dispatch 函数，并传递一个 Action 对象即可。
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button onClick={() => dispatch({ type: "decrement" })}>-</button>在上面的代码中，我们使用匿名箭头函数来创建 Action 对象，并传递给 dispatch 函数。
现在 Counter1 组件就可以修改 Store 中的计数器状态了。
4. 组件共享 Store 中的状态
现在我们已经创建了 Redux Store，并让 Counter1 组件可以读取和修改 Store 中的状态。接下来我们需要让 Counter2 组件也可以共享同一个计数器状态。
-- -------------------- ---- -------
-------- ---------- ------ -------- -- -
------ -
-----
----------- -------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-
------ ------- -----------------------------------上面的代码中，Counter2 组件和 Counter1 组件非常相似。它们都通过 connect 函数连接到同一个 Redux Store 中。因此它们可以共享 Redux Store 中的计数器状态。
现在无论修改 Counter1 组件中的计数器状态，还是修改 Counter2 组件中的计数器状态，都会影响到整个应用的状态。因为它们共享同一个 Redux Store。
指导意义
通过本文的介绍，我们了解了 Redux 是如何在不同组件中共享状态的。同时，我们也学习到了一些有用的指导意义：
Redux 通过单向数据流的方式，集中式的存储管理整个应用的状态。
通过 connect 函数，我们可以连接组件和 Redux Store，并让组件可以访问和修改 Store 中的状态。
多个组件可以共享同一个 Redux Store 中的状态，从而实现在不同组件中共享状态的功能。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67822f94935627c900fbb062
