本文旨在介绍如何在 React 单页面应用（SPA）中使用 Redux 进行数据状态管理。Redux 是一个 JavaScript 应用程序状态管理工具，可以帮助开发者采用一种可预测的方式来处理应用程序的状态和数据流。
为什么需要 Redux？
React 是一个非常流行的前端库，它让开发者可以构建复杂的用户界面。但是只有 React 的话，当应用的状态越来越复杂时，状态管理变得非常棘手。随着应用程序增长，组件之间的数据传递变得越来越棘手，并且快速变得混乱。
Redux 提供了一个单一的全局存储器，使应用程序中的任何组件都可以访问状态。它也提供了一种可预测的数据流，帮助开发者更好地控制应用程序的状态。
Redux 的基本概念
Redux 的核心概念有三个：action、reducer 和 store。
Action
一个 action 是一种描述应用程序发生了什么的对象。例如，让用户登录可能会触发一个名为 LOGIN 的 action。
----- ----- - ---------- --------- -- --
----- --------
-------- -
---------
--------
-
---Reducer
一个 reducer 是一个计算新状态的纯函数。它接收当前状态和一个 action 作为参数，并返回一个新的状态。
----- ------------ - - ----------- ----- --
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------
------ -
---------
----------- -----
--------- -----------------------
--
--------
------ ------
-
--Store
一个 store 是一个保存应用程序状态的对象。它暴露了几个公共方法，例如 getState、dispatch 和 subscribe。
------ - ----------- - ---- -------- ----- ----- - --------------------------
Redux 的使用流程
Redux 使用一种单向数据流，即用户操作会触发一个 action，这个 action 会走向一个 reducer，然后生成一个新的 state，并保存在 Redux store 中。
当应用程序中的任何组件需要更改状态时，它会通过 dispatch 方法向 Redux 发送一个 action。这个 action 由 reducer 处理并返回新状态。
Redux store 保存了整个应用程序的状态，并允许组件从中提取数据。它还提供了一种订阅机制，让组件可以获知 state 的更新。
在 React SPA 中使用 Redux
在 React SPA 中使用 Redux，需要安装 redux 和 react-redux 两个库。redux 用于创建 store 和 reducer，react-redux 利用 React 的上下文机制使用 store 中的状态。
创建 store 和 reducer
创建一个存储器需要创建一个 reducer，并使用 createStore 方法创建一个 store：
------ - ----------- - ---- --------
----- ------------ - - ----------- ----- --
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------
------ -
---------
----------- -----
--------- -----------------------
--
--------
------ ------
-
--
----- ----- - --------------------------在组件中使用 Redux 的状态
可以通过 react-redux 库的 connect 方法，将组件与 store 中的状态连接起来。connect 方法传入一个 mapStateToProps 函数和一个 mapDispatchToProps 函数，分别将 store 中的状态映射到组件的 props 和将 dispatch 方法映射到组件的 props。
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------- - -- ----------- --------- -------- -- -- -
----- ----------- - -- -- -
-- ------------- -
--------------------- ----------------
-
--
------ -
------- ----------------------
----------- - --------- ------------- - --------
---------
--
--
----- --------------- - ------- -- --
----------- -----------------
--------- --------------
---
------ ------- --------------------------------------处理异步操作
有时在应用程序中会发生异步操作，如网络请求、定时器等。对于Redux异步的操作可以使用 redux-thunk 中间件处理。
首先安装redux-thunk：
--- ------- ----------- ------
然后注册 middleware：
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ----- ----- - ------------------------- ------------------------
现在，在我们的 action creator 函数中可以执行异步操作，并且返回一个函数（而不是一个 action 对象）：
----- ----- - ---------- --------- -- -
------ ---------- -- -
---------- ----- --------------- ---
---------------------- ---------
-------- -- -
---------- ----- ---------------- -------- - -------- - ---
--
-------------- -- -
---------- ----- ---------------- -------- - ----- - ---
---
--
--总结
在 React SPA 中使用 Redux 进行数据状态管理并不难。只需遵循 Redux 的单向数据流模型，并通过 connect 方法将组件与 store 中的状态连接起来。除此之外，还应该考虑使用中间件来处理异步操作。相信这篇文章对使用 Redux 进行前端类 SPA 开发的同学们具有一定的指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a7d95248841e9894471c00