简介
Redux 是一个 JavaScript 应用程序中的状态容器。它提供了一个可预测的状态管理机制，容易在 React 中使用。Redux 有三个核心原则：
- 单一数据源：整个应用程序状态都存储在单个对象中，即 Store。
- 状态不可变性：状态只能通过向 Store 分发操作来修改。
- 纯函数修改：通过“纯”函数来执行状态修改操作。
Redux 适用于中大型的 React 应用，在这样的应用中，数据流非常重要，Redux 的使用可以大大简化应用的状态管理。
Redux 的基本概念
Store
存储了 React 应用程序的状态，并且在整个应用程序中只有一个 Store。
Action
用来描述对 State 的更改。可以看作是更改 State 的指令。
Reducer
执行实际 State 更改的地方，接收一个 Action，并将 State 更改为新的状态。Reducer 是纯函数，即接受的参数不可变。
Middleware
在 Redux 中，可以使用 Middleware 增强 Redux 的行为，例如日志记录、错误报告、异步操作等。
在 React 中使用 Redux
安装 Redux
可以使用 npm 进行 Redux 的安装。
npm install redux
定义 Action 和 Reducer
先定义一个 action，在需要的地方进行调用，然后 reducer 对 action 进行响应并修改状态。这里以一个 todoList 为例。
定义一个 Action：
const ADD_TODO = 'ADD_TODO'
function addTodoAction(text) {
return {
type: ADD_TODO,
text
}
}定义一个 reducer：
-- -------------------- ---- -------
----- --------- - -
----- --
-
-------- -------------------- - ---------- ------- -
------------------- -
---- ---------
------ -
----- ------------------ ------------
-
--------
------ --------
-
-创建 Store
在 React 的入口文件中创建一个 Store：
import { createStore } from 'redux'
import todoReducer from './reducers/todo'
const store = createStore(todoReducer)订阅 Store
在 React 组件中订阅 Store：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- -------
-------- ---------- -
----- ------ -------- - ------------
------------ -- -
------------------ -- -
----- ------- - ---------------------
----------------
--
-- ---
------ -
-----
-
--------------- ------ -- -
-- ----- ----- --- ---- -----
--
-
------
-
-发送 Action
调用 Action 的方法，例如增加一个 todo：
store.dispatch(addTodoAction('New Todo'))总结
Redux 经常被用于处理大量数据的 React 应用程序，Redux 简化了应用程序中的状态管理操作，使得代码更加清晰和易于维护。同时，Redux 可以通过使用 Middleware 提供前所未有的功能。在使用 Redux 之前，需要对它的基本概念有清晰的理解。在 React 应用程序中使用 Redux 需要定义 Action 和 Reducer 并创建 Store，并在组件中订阅 Store 和执行 Action。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ade7b5add4f0e0ff775b16