前言
在开发 React 应用时，组件之间的状态管理一度是个棘手的问题。为了解决这个问题，Facebook 提出了 Flux 架构。Flux 是一种状态管理模式，旨在使应用程序更清晰、更可预测、更易于开发和维护。虽然 Flux 已经解决了很多问题，但是它本身并不完美。Redux 是基于 Flux 的一种改进。Redux 在保留 Flux 的优点的基础上，还解决了一些 Flux 的缺点。本文将介绍 Redux 的基本概念，以及如何在 React 应用中使用 Redux 进行状态管理。
Redux 的基本概念
Redux 是一种状态容器，它存储整个应用程序的状态，并使其易于访问和修改。Redux 拥有一个单一的 Store，Store 中存储了整个应用程序的状态。当应用程序的状态发生变化时，Redux 会触发一系列的 Actions，这些 Actions 描述了应用程序的状态变化。Reducers 接收这些 Actions 并处理它们，最终返回一个新的状态，并更新 Store 中的状态。Redux 的工作流程可以用下面的图示来表示：
graph LR
A(({Action}))-->|dispatch|B{Store}
B-->|getState|C[Component]
C-->|subscribe|B接下来，我们将逐个介绍 Redux 的几个主要概念：
Store
Store 是 Redux 架构的核心，它存储了整个应用程序的状态。组件可以订阅 Store，以便在状态发生变化时获得通知。组件也可以从 Store 中获取当前状态。当应用程序的状态发生变化时，Redux 会调用所有订阅者的回调函数。
Action
Action 是一种简单的对象，它描述了应用程序的状态变化。Actions 应该是一个纯对象，只包含一个 type 属性和一些参数。Action 中的 type 属性指定了要执行的操作。
const ADD_TODO = 'ADD_TODO';
const action = {
type: ADD_TODO,
payload: {
text: 'add a todo item',
completed: false
}
};Reducer
Reducer 是一种特殊的函数，它接收当前的状态和一个 Action，并返回一个新的状态。Reducer 应该是一个纯函数，它不会修改传入的参数，也不会产生副作用。每当应用程序的状态发生变化时，Reducer 都会被调用，并返回一个新的状态。使用 Redux 后，整个应用程序的状态都由 Reducer 来管理。
-- -------------------- ---- -------
----- ------------ - -
--------- --
--
-------- ----------------- - ------------- ------- -
------------------- -
---- ---------
------ -
---------
--------- ------------------- ---------------
--
--------
------ ------
-
-Action Creator
Action Creator 是一个返回 Action 的函数。通过使用 Action Creator 来创建 Action，我们可以避免手动创建 Action 对象，并由此避免手动拼写 type 属性的错误。
function addTodoAction(todo) {
return {
type: ADD_TODO,
payload: todo
};
}Redux 的优点
使用 Redux 的主要优点包括：
状态预测性：使用 Redux 后，整个应用程序的状态都可以被完整地描述，从而使状态变化更加可预测。
易于调试：Redux 中的状态变化是通过单向数据流的方式传递的，由此使得我们可以更容易地定位问题的发生地点。
易于测试：Redux 中的 Reducer 是一个纯函数，所以我们可以通过单元测试来确保其正确性。
易于扩展：Redux 使用了中间件的概念。我们可以通过编写中间件来扩展 Redux 的功能。
在 React 应用中使用 Redux
安装 Redux
使用 npm 安装 Redux：
npm install --save redux
定义 Reducer
定义一个 Reducer 来处理状态变化：
-- -------------------- ---- -------
----- ------------ - -
--------- --
--
-------- ----------------- - ------------- ------- -
------------------- -
---- ---------
------ -
---------
--------- ------------------- ---------------
--
--------
------ ------
-
-创建 Store
使用 createStore 函数来创建 Redux Store：
import { createStore } from 'redux';
import todoReducer from './reducers/todoReducer';
const store = createStore(todoReducer);订阅 Store
组件可以使用 subscribe 函数订阅 Redux Store，以便在状态变化时获得通知：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------------------- ----- ----- - ------------------------- ----- -------------- - -- -- - ----- -------- - -------------------------- -- -- -------- --- -- ----------------- --------------------------------
分发 Action
使用 dispatch 函数来分发 Action：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------- ---- -------------------------
----- ----- - -------------------------
----------------
----- ---------
-------- -
----- ---- - ---- ------
---------- -----
-
---使用 React-Redux
React-Redux 是一个库，它提供了一些用于将 React 和 Redux 集成的工具函数。使用 React-Redux，我们可以使用 Redux 的状态管理功能来实现 React 组件。
首先，我们需要使用 Provider 和 connect 来将 Redux 和 React 应用程序集成：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------------------
------ -------- ---- ------------------------
----- ----- - -------------------------
----------------
--------- --------------
--------- --
------------
-------------------------------
--然后，我们可以使用 connect 函数来创建一个连接到 Redux Store 的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- -------- ------- --------------- -
-------- -
------ -
-----
----
----------------------------- -- -
--------------------
---
-----
------- -------------------------------- -------------
------
--
-
-
----- --------------- - ----- -- --
--------- --------------
---
----- ------------------ - -
-------- -- -- -- ----- --------- -------- - ----- ----- --------------- ---------- ----- - --
--
------ ------- ------------------------ ------------------------------connect 的第一个参数是一个函数，它知道如何将 Redux Store 中的状态映射到 React 组件的属性中。mapStateToProps 函数返回一个对象，其中包含了需要映射到组件属性上的字段。mapStateToProps 会在 Redux Store 发生变化时自动被调用，从而更新组件状态。
connect 的第二个参数也是一个函数，它知道如何将 Redux Store 中的操作映射到 React 组件的操作上。mapDispatchToProps 函数返回了一个包含了需要映射到组件属性上的操作。操作可以是一个简单的对象，也可以是一个 Action Creator 函数。当组件执行一个操作时，mapDispatchToProps 函数会根据操作名称自动分发相应的 Action。
总结
Redux 是状态管理架构中的一种，它能够使 React 应用程序更清晰、更可预测、更易于开发和维护。本文介绍了 Redux 的主要概念，并展示了如何将 Redux 集成到 React 应用中。我们希望通过本文，读者能够理解 Redux 的基本原理并能够将其应用于实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64561752968c7c53b095c9d6