在前端应用中，组件的数据通常需要在不同的组件之间共享。而 Redux 是一种 JavaScript 应用程序的状态管理工具，被广泛应用于前端应用中的数据管理。Redux 提供了一种简单而又可靠的方法，使得数据沿着组件树传递变得很容易，有效地解决了在跨组件传递和管理数据时的复杂性。
简介
Redux 的基本编程模型分为三个部分：store、action 和 reducer。store 是应用程序数据的单一来源，action 描述了用户在界面上执行的操作，而 reducer 是一个函数，用于在接收到一个 action 时更新 state。
简单来说，Redux 的数据流如下：
Action -> Reducer -> Store
当应用程序状态发生变化时，Redux 将执行 reducer，并存储新的应用程序状态。
Redux 工作原理
使用 Redux 实现跨组件传递数据，需要掌握如下的 Redux 工作流程。
1. 创建 store
在 Redux 中，store 是应用程序的状态单一来源。可以通过 createStore 函数创建 store 实例。在创建 store 时，需要传递一个 reducer 函数，用于处理应用程序的状态。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- --------------
------ - --------- ----- -------------- -
--------
------ -----
-
-
----- ----- - --------------------2. 定义 action
通过 action 来描述用户对界面执行的操作。Redux 中的 action 是一个 JavaScript 对象，必须包含一个 type 属性，用于标识这个 action 所要执行的操作的类型。下面是一个简单的示例代码：
const updateUser = (user) => ({
type: 'UPDATE_USER',
payload: user
})3. 更新应用程序状态
当用户执行操作后，需要分发 action 来更新应用程序的状态。可以通过 store 的 dispatch 函数来分发 action。下面是一个示例代码：
store.dispatch(updateUser({ name: 'Alice', age: 26 }))4. 获取应用程序状态
当需要获取应用程序的状态时，可以通过 store 的 getState 函数来获取。下面是一个示例代码：
const state = store.getState()
5. 监听应用程序状态变化
在 Redux 中，当应用程序状态发生变化时，需要通知所有的组件。可以通过 store 的 subscribe 函数来监听状态变化。下面是一个示例代码：
const unsubscribe = store.subscribe(() => {
console.log('State updated', store.getState())
})Redux 实现跨组件传递数据
上面的步骤已经演示了 Redux 工作流程。接下来，我们将介绍如何使用 Redux 实现跨组件传递数据。假设我们有两个组件 A 和 B，需要在它们之间传递数据。
1. 在 Redux 中定义数据
首先，在 Redux 的 store 中定义数据。我们需要在 reducer 中定义数据结构，并实现相应的 action，用于更新这些数据。
-- -------------------- ---- -------
----- ------------ - -
----- ----
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- -
--------
------ -----
-
-
------ ----- ------- - ------ -- --
----- -----------
-------- ----
--2. 在组件 A 中更新数据
在组件 A 中，当数据发生变化时，我们需要分发一个 action。这将会更新 store 中的数据。比如，我们在组件 A 中获取后端数据，并将其保存到 store 中。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ----- --------- - ----- -- -- - -- ---- ----- ---- - ----- --------------------------------- -- ------ ----- ----------------------------- -
3. 在组件 B 中读取数据
在组件 B 中，我们需要订阅 store，以获取更新的数据。为此，我们可以使用 React Redux 提供的 connect 函数。这将会创建一个 React 高阶组件，用于将组件和 store 连接起来。在 connect 函数中，我们需要定义 mapStateToProps 函数，用于将 store 中的数据映射到组件的 props。
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- ------------- - -- ---- -- -- - -- -- ----- ---- ------ ----------------- - ----- --------------- - ------- -- -- ----- ---------- -- ------ ------- ---------------------------------------
到此，我们就完成了在 Redux 中实现跨组件传递数据的过程。
结论
通过上述的步骤，我们已经成功地实现了在 Redux 中传递数据。通过使用 Redux，我们有效地管理了应用程序的状态，并使得跨组件传递数据变得简单而又方便。因此，在开发中，我们可以借助 Redux 提供的工具来实现更加完善的应用程序设计。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ad948da05147dd0258dd2