什么是 Redux？
Redux 是一个流行的状态管理库，它与 React 一起使用变得非常流行。它提供了一个全局的状态管理机制，可以让你在应用程序中跟踪状态，并可以跨组件进行状态共享。Redux 的最主要的特点是其单向数据流，这就意味着数据流向是单向的，当你的应用程序发生变化时，只有一个地方会触发数据变更，这极大地简化了代码，便于维护和测试。
Redux 的核心概念
Redux 的核心概念是 Store、Action、Reducer 和中间件。
Store 是 Redux 的一个全局状态树，是整个应用程序的数据仓库。通过 Store，你可以访问和更新你的应用程序的状态。在 Redux 中，所有通过 Store 中状态的变更都必须通过发送一个 Action 来完成。
Action 是应用程序状态的变更的数据对象，简单来说 Action 就是一个普通的 JavaScript 对象，它必须包含一个 type 属性，表示要进行的操作类型。
Reducer 是一个纯函数，它用于更新 Store 中的状态，可以根据 Action 类型将应用程序的状态上下文（Store）更新为包含行动所需的新数据的新状态。Redux 规定，Reducer 必须是纯函数，它只接收输入并生成输出，不应该有副作用。Redux 中一个模块可以有多个 Reducer，它们负责处理不同的 Actions 类型。
中间件是在发送 Action 和更新 Store 的过程中，可以扩展 Redux 功能的一些功能。 中间件可以用于记录日志、接收异步操作等。
Redux 工作流程
Redux 工作流程如下：
- 应用程序向 Store 发送 Action。
- Reducer 确定要应用哪个操作。
- 在 Store 中更新状态，触发应用程序状态的更新。
- 通知组件应用程序状态的更新，组件进行重新渲染并获取新的状态数据。
使用步骤：
- 安装 Redux
npm install redux --save。 - 创建一个 Redux Store。
- 创建一个或多个 Actions，描述应用程序中发生的事件。
- 创建一个或多个 Reducers，用于处理不同类型的 Actions。
- 使用 Provider 包装应用程序的根组件，将 Redux Store 传递给组件树。
- 在组件中访问 Store 中的状态数据和派发 Actions。
下面演示一个管理 todo 列表的例子：
步骤1：安装 Redux
安装完成后，引入 Redux 和 React-Redux：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';
import './index.css';
import rootReducer from './reducers';步骤2：创建 Store
const store = createStore(rootReducer);
步骤3：定义 Actions
-- -------------------- ---- ------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ -------- ------------- - ------ - ----- --------- ---- -- - ------ -------- -------------- - ------ - ----- ------------ -- -- -
步骤4：创建 Reducer
-- -------------------- ---- -------
------ - --------- ----------- - ---- -------------
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
------ -
---------------
-
--- ------------------ - --
----- ------------
---------- -----
-
-
--
---- ------------
------ -
------ ---------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
--------
------ ------
-
-
------ ------- ------------步骤5：使用 Provider 包装根组件
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);步骤6：在组件中访问 Store 中的状态数据和派发 Actions
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - -------- ---------- - ---- ------------
-------- ----- -
----- -------- - --------------
----- ----- - ------------------- -- -------------
----- -------- - -------------
-------- ------------------- -
-----------------------
----- ---- - ------------------------------
-- ------------ - -- -
------------------------
---------------------- - ---
-
-
-------- --------------- -
-------------------------
-
------ -
---- ----------------
----- ------------------------
------ ----------- ---------------- ----- -------------- --
------- --------------------------
-------
----
----------------- -- -
---
-------------
----------- -- ---------------------
-------- --------------- -------------- - -------------- - ------ --
-
-----------
-----
---
-----
------
--
-
------ ------- ----总结
Redux 是一个非常强大的状态管理库，它提供了一个可预测的状态管理机制，可以让你在应用程序中跟踪状态，并可以跨组件进行状态共享。Redux 的工作流程简单易懂，只要掌握了 Redux 的核心概念，就能够很容易地使用和理解。因此，Redux 对于前端开发者来说是非常重要的一个技术技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c9f61b5ad90b6d0418d340