Redux 是一个流行的状态管理库，用于管理 React 应用程序中的状态。Redux 与 React 配合使用，可以极大地提高应用程序的可维护性和性能。在本篇文章中，我们将深入探讨 Redux 和 React 之间如何进行数据通信。
Redux 和 React 之间的数据通信
在 React 中，组件之间的数据通信可以通过 prop 和 state 进行。当一个组件的状态发生变化时，通过 prop 将变化传递给其他组件。在 Redux 中，数据可以集中存储在一个 store 中，所有组件都可以从 store 中获取数据。当 store 中的数据发生变化时，所有订阅了该数据的组件都将更新。
要在 Redux 和 React 之间进行数据通信，需要按照以下步骤进行操作。
- 安装 Redux 和 React-Redux
为了使用 Redux 和 React-Redux，需要先将它们安装到我们的项目中。可以使用以下命令进行安装：
npm install redux react-redux
- 创建 Redux store
使用 Redux，需要首先创建一个 store。store 是一个包含应用程序状态的 JavaScript 对象，可以用于存储应用程序中的数据。要创建一个 store，需要先定义一个 reducer 函数。
-- -------------------- ---- -------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------这段代码中，我们定义了一个 reducer 函数，它接受一个状态和一个操作。根据操作的类型，它会更新状态并返回一个新的状态。然后我们使用 createStore 函数创建一个新的 store，它接受 reducer 作为参数。
- 将 store 传递给 React 组件
要访问 store 中的状态，需要将 store 传递给 React 组件。为此，我们可以使用 React-Redux 库中的 Provider 组件。
import { Provider } from "react-redux";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);这段代码中，我们将 store 传递给 Provider 组件的属性中。Provider 组件将 store 作为上下文传递给应用程序的所有组件。
- 使用 connect 函数连接组件和 store
要从 store 中获取数据并将其传递给组件，可以使用 connect 函数。connect 函数是一个高阶组件，它接受两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps 是一个函数，它从 Redux store 中获取数据并将其作为 props 传递给组件。
function mapStateToProps(state) {
return {
count: state.count
};
}mapDispatchToProps 是一个函数，它将一个或多个 action 创造者绑定到组件的 props 中。当组件调用这些函数时，会触发一个 dispatch 调用，从而将 action 分发到 Redux store 中。
function mapDispatchToProps(dispatch) {
return {
increment: () => dispatch({ type: "INCREMENT" }),
decrement: () => dispatch({ type: "DECREMENT" })
};
}使用这两个函数，我们可以连接组件和 Redux store。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
--------------------
------- ------------------------------------
------- ------------------------------------
------
--
-
------ ------- ------------------------ -----------------------------在这个示例中，我们使用 connect 函数将 Counter 组件连接到 Redux store。Counter 组件使用 mapStateToProps 函数从 store 中获取 count 属性并将其作为 props 传递给组件。Counter 组件还使用 mapDispatchToProps 函数将 increment 和 decrement 函数绑定到 props 中。
总结
Redux 和 React 之间的数据通信是一个重要的主题，它可以提高应用程序的可维护性和性能。本文介绍了使用 Redux 和 React-Redux 库进行数据通信的步骤，并提供了示例代码。希望这篇文章对于初学者有所帮助，让大家更好的使用 Redux 和 React。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495397048841e989427a08d