Redux 是一种用于 JavaScript 应用程序的可预测状态容器。它可以帮助我们管理应用程序的状态，从而使我们的代码更容易理解和维护。在开发前端应用程序时，常常需要在不同的组件之间共享 Redux 状态。本文将讨论如何在 React 应用程序中跨组件共享 Redux 状态。
Redux 状态的定义与使用
Redux 通过一个名为 Store 的对象来存储应用程序的状态。在 Redux 中，我们通过定义 Reducer 函数来管理状态的变化。Reducer 函数接收当前状态和 Action，返回新的状态。例如，下面是一个简单的 Reducer 函数，用来管理角色列表：
-- -------------------- ---- ------- -------- ----------- - --- ------- - ------ ------------- - ---- ----------- ------ ---------- ------------- ---- -------------- ------ ----------------- -- ------- --- ----------- -------- ------ ------ - -展开代码
可以看到，Reducer 函数接收一个初始状态（如果没有初始状态，就使用一个空数组），并通过 Action 来修改该状态。在上面的 Reducer 函数中，我们定义了两种 Action：ADD_ROLE 和 DELETE_ROLE。当执行 ADD_ROLE 的时候，我们会将新的角色添加到状态数组中；当执行 DELETE_ROLE 的时候，我们会从状态数组中删除指定的角色。
创建 Redux Store
在将 Redux 状态共享给 React 应用程序的组件之前，我们需要首先创建一个 Redux Store。我们通过使用 createStore 函数创建 Store。createStore 函数接收一个 Reducer 函数并返回一个 Store 对象。例如，下面是一个简单的创建 Store 的示例：
import { createStore } from 'redux'; import roles from './reducers'; const store = createStore(roles);
在上面的代码中，我们导入了 Redux 的 createStore 函数，并将 roles Reducer 函数传递给它来创建一个 Store 对象。现在，我们可以在应用程序的任何组件中使用 store.getState() 方法来访问状态对象。
在 React 组件中使用 Redux 状态
要在 React 组件中使用 Redux 状态，我们需要使用官方提供的 react-redux 库。react-redux 库提供了两个重要的组件：Provider 和 connect。
- Provider 组件是一个顶层组件，用于将 Redux Store 传递给整个应用程序。可以将 Provider 组件包装在应用程序的根组件中，使其在应用程序的任何级别上都可以访问到 Redux Store。
- connect 函数是一个高阶函数，用于将组件连接到 Redux Store。connect 函数接收一个 mapStateToProps 函数和一个 mapDispatchToProps 函数，并返回一个新的组件，该组件将被用于在组件中访问 Store。
下面是一个简单的组件，它使用 connect 函数将应用程序中的状态映射到组件的 props 中：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- -------- ---------- ----- -- - ------ - ---- --------------- -- - --- ------------------------------ --- ----- -- - -------- ---------------------- - ------ - ------ ------ -- - ------ ------- -----------------------------------展开代码
在上面的代码中，我们使用 connect 函数来将 mapStateToProps 函数与 RoleList 组件连接起来。mapStateToProps 函数接收当前的 Store 状态，并将该状态作为 roles 属性传递给组件。
跨组件共享 Redux 状态
在应用程序中的不同组件中，我们可能希望访问同一部分状态。在这种情况下，我们可以使用 react-redux 库中的 Provider 组件来共享 Redux Store。例如，下面是一个将 Store 传递给两个组件的示例：
-- -------------------- ---- ------- ------ - -------- - ---- -------------- ------ - ----------- - ---- -------- ------ ----- ---- ------------- ------ -------- ---- ------------- ------ -------- ---- ------------- ----- ----- - ------------------- -------- ----- - ------ - --------- -------------- ----- --------- -- --------- -- ------ ----------- -- -展开代码
在上面的代码中，我们使用 Provider 组件将 Redux Store 传递给应用程序的两个子组件：RoleList 和 RoleForm。这使得这两个组件可以访问共享的 Store。
总结
Redux 是一个非常强大的状态管理工具，可以帮助我们管理应用程序的状态，并使我们的代码更易于理解和维护。在本文中，我们介绍了如何创建 Redux Store、在 React 组件中使用 Redux 状态以及如何跨组件共享 Redux 状态。在编写 React 应用程序时，我们可以使用这些技巧来确保我们的应用程序的状态能够组件共享并正确更新。希望这篇文章可以帮助你更好地理解 Redux 和 React 应用程序的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1e71483d39b4881610d55
