前言
Redux 是一个在 JavaScript 应用中管理状态的工具库，通常与 React 一起使用。Redux 帮助应用程序保存和管理组件统一的状态。它可以使开发人员更轻松地管理和传递应用程序中的数据，同时也可以更轻松地跟踪应用程序的流程以便于调试。
在本文中，我们将讨论 Redux 框架的基本原则、 Store 、 Action 和 Reducer，以及如何在 React 应用中使用 Redux。
Redux 的原则
Redux 框架是基于三个基本原则设计的，即单一数据源、状态只读和纯函数更新。
单一数据源
Redux 提供了一个单一的数据源，即一个全局对象，存储应用程序的完整状态。相比于传统的 Flux 模式，Redux 的单一数据源更容易管理、调试和协作。
状态只读
Redux 状态是只读的，也就是说状态的值不会被其他组件或模块直接更改。相反，只能通过发起一个 action 来修改状态，因此状态的变化可以清晰的追踪。
纯函数
Redux 中的 reducer 是纯函数，它接收先前的状态和 action，然后生成新状态。这个函数没有副作用，没有任何可变的参数，而是返回全新的状态来保持代码更简单和可预测性。
Store
Store 是整个 Redux 应用程序的核心。它是应用程序中存储整个状态的地方。Store 实例是通过将一个 reducer 传递给 createStore() 生成的。
我们来看一个最简单的 Store：
import { createStore } from 'redux';
import rootReducer from './reducers/index';
const store = createStore(rootReducer);Action
在 Redux 框架中，所有的状态改变都必须通过派发 action 来实现。Action 是一个普通的 JavaScript 对象，包含一种类型、一个字符串或符号，以表示所需的状态更改类型。Action 还可以包含其他任何有助于描述更改的信息，例如数据。
这是一个 Action 的简单示例：
{
type: 'ADD_TASK',
task: {
title: '新任务',
content: '这是一个新的任务'
}
}Reducer
Reducer 是一个纯函数，接收先前的状态以及要进行的 action，并在必要时生成新状态。Reducer 如其名，将不同的状态函数合并成一个状态对象。
Reducer 函数必须接收两个参数：先前状态和要进行的 action。当一个应用程序派发一个 action 时，所有与该 action 相匹配的 Reducer 将被调用。Reducer 函数返回一个新状态，React 应用程序中的所有组件都可以使用这个新状态。
这是一个 Reducer 示例：
-- -------------------- ---- -------
----- ------------ - - ------ -- --
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ - ------ ---------------- ------------ --
--------
------ ------
-
-在 React 中使用 Redux
在使用 Redux 的 React 应用程序中，最好的方式是使用 react-redux 库，该库简化了 Redux Store 在 React 中使用的过程和代码量。
我们来看一个 React 中使用 Redux 的例子：
-- -------------------- ---- -------
------ -------- ---- -------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------------
----- ----- - -------------------------
-------- ----- -
------ -
--------- --------------
--------- --
-----------
--
-
------ ------- ----在 App 组件中，我们提供了 Redux Store，以便在任何子组件中都可以访问到该 state。例如，在 TaskList 组件中我们可以这样使用：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ------- - ---- ------------------
-------- ---------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
-------- --------------- -
------------------ ------ ------ -------- ---------- ---
-
-- ------
-这样我们就实现了一个基本的 Redux 相关的 React 应用程序。
结论
Redux 框架是一个非常强大并且易于管理的状态管理工具。采用 Redux 编写的代码分离度高，易于扩展和调试。结合 React 和 react-redux 库，使用 Redux 可以更容易地在 React 应用程序中使用。当你开始学习 Redux 时，需要经过一些实践积累，以充分理解它的理念和用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fb3b1e884a3e30f2ff362