前言
React 和 Redux 都是前端开发中非常流行的工具库，它们能够帮助我们更轻松地构建大型 Web 应用。本文将介绍如何在 React 和 Webpack 项目中使用 Redux，本文假设你已经有了基础的 React 和 Webpack 知识。
Redux 是什么
Redux 是一个状态管理库，它可以使得组件之间共享同一个状态，使得应用变得更加可预测、易于维护。Redux 实现了单向数据流，每次更新状态都要经过 reducer，保证了应用的状态修改是可控的。
Redux 核心概念
在使用 Redux 之前，我们需要了解一些核心概念。
Store
Store 就是应用的状态树，它是唯一的。
Action
Action 是一个普通的 JavaScript 对象，它描述发生了什么，会被传递到 reducer 中。
Reducer
Reducer 是用来更新状态的地方，它接收两个参数：当前状态和 Action 对象。每个 Reducer 只能更新自己负责的状态。
中间件 (Middleware)
中间件可以在对 Action 处理前或者处理后拦截它，进行一些自定义操作，最常见的就是异步操作。
组件
组件是 React 应用中最基本的构建单位，管理用户界面的展示和交互。
Redux 开发流程
使用 Redux 开发大型应用需要经过以下流程。
- 设计应用状态树
- 设计 Action 和 Reducer，更新应用状态
- 用 Provider 包裹应用，将 store 传递给组件
- 将组件连接到 store
在 React+Webpack 中使用 Redux
下面介绍如何在 React+Webpack 项目中使用 Redux。
安装 Redux
首先，我们需要安装 Redux 和 react-redux。
npm install redux react-redux --save
应用状态树设计
针对我们的应用程序，设计应用状态树，这里给出一个简单的例子。
-- -------------------- ---- -------
-
------ -
-
--- --
----- ----- ---
---------- -----
--
-
--- --
----- ----- ---
---------- ----
-
-
-设计 Action 和 Reducer
设计 Action 和 Reducer，当一个 Action 被分发时，Reducer 将会更新状态树的一部分。
-- -------------------- ---- -------
-- ------ -----
------ ----- -------- - -----------
------ ----- ----------- - --------------
-- ------ --------
------ -------- ------------- -
------ - ----- --------- ---- -
-
------ -------- -------------- -
------ - ----- ------------ -- -
-
-- -------
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
-
--- ------------ - --
----- ------------
---------- -----
-
-
---- ------------
------ -------------- --
-------- --- ----------
- - -------- ---------- --------------- -
- ----
-
--------
------ -----
-
-创建一个 store
创建一个 store，初始化应用状态。
import { createStore } from 'redux';
import todos from './reducers';
const store = createStore(todos);
export default store;在 Provider 中使用 store
用 Provider 组件将应用包裹，将 store 传递给组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
-------
--------- --------------
---- --
------------
-------------------------------
--连接组件和 store
用 connect 方法将组件连接到 store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- ---------- - ---- ------------
----- -------- ------- --------------- -
-------- -
------ -
----
-------------------------- --
---
-------------
----------- -- ---------------------------
-------- --------------- -------------- - -------------- - ------ --
-
-----------
-----
--
-----
-
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---- ---- -- ------------------------
------- -- -- ------------------------
---
------ ------- ------------------------ ------------------------------至此，我们已经成功地使用 Redux 在 React+Webpack 项目中管理状态，可以顺利运行我们的应用了。
总结
使用 Redux 能够使得我们更加方便地管理应用的状态，使得应用变得更加可预测、易于维护。在 React+Webpack 应用中使用 Redux，需要经过应用状态树的设计、Action 和 Reducer 的编写、store 的创建、Provider 和 connect 的使用等一系列步骤。这些步骤都是非常基础的，掌握它们可以使你更加轻松地应对大型复杂的应用程序的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645373ad968c7c53b07d6124