什么是 Redux
Redux 是一种状态管理模式，它可以让前端开发更加可预测、可控。它是 React 生态中最流行的状态管理库之一，但它并不限于 React，可以与 Angular、Vue 等框架集成。
Redux 基于三个核心原则：
- 单一数据源：整个应用的状态都存储在一个单一的对象树中。
- 状态只读：唯一改变状态的方式是触发一个 action，而不能直接修改状态。
- 纯函数更新状态：使用纯函数（不会有副作用的函数）描述 action 如何改变状态。
Redux 中的中间件
Redux 中的中间件是指在 dispatch action 和 reducer 处理 action 之间执行的函数。中间件默认接收到的参数是 dispatch，它可以做到：
- 执行异步操作
- 执行批量操作
- 给 action 动态添加属性
- 修改 dispatch
Redux 中的中间件一般用来处理异步操作。比如一个发起网络请求的 action：
export const getUser = (userId) => dispatch => {
dispatch({ type: GET_USER_REQUEST });
return fetch(`http://localhost:3000/users/${userId}`)
.then(response => response.json())
.then(user => dispatch({ type: GET_USER_SUCCESS, payload: user }))
.catch(error => dispatch({ type: GET_USER_FAILURE, payload: error }));
};上面的代码使用了 Redux-thunk 中间件，可以让我们返回一个函数而不是一个 action 对象。
Redux 中间件的使用
使用中间件需要先安装相应中间件的库，比如 Redux-thunk：npm install redux-thunk --save。
使用中间件需要将其加入到 createStore 方法中：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));applyMiddleware 方法可以接受一个或多个中间件，epic、sage 等都是 Redux 中常用的中间件。
Redux 和中间件实战
实现一个计数器应用，可以通过点击按钮增加或减少计数器的值，并异步请求用户信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------------------
----- ------- ------- --------------- -
--------- - -- -- -
--------------------- ----- ----------- ---
-
--------- - -- -- -
--------------------- ----- ----------- ---
-
------------------- -
------------------------
-
-------- -
------ -
-----
-------------------------------
------- -----------------------------------
------- -----------------------------------
---------------- -- ----------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------------
----- ----------
---
------ ------- ------------------------ - ------- -------------- -------------------- ---- -------
----- ------------ - -
------ --
----- ----
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
---- -------------------
------ - -------- --
---- -------------------
------ - --------- ----- -------------- --
---- -------------------
------ - -------- --
--------
------ ------
-
--
------ ------- ---------------上面的代码演示了使用 Redux 和中间件实现一个计数器，其中使用了 Redux-thunk 中间件实现异步操作。
总结
Redux 是一个非常强大的状态管理库，可以通过使用中间件让我们更好地掌控应用状态。但请注意不要过度使用中间件，否则可能会影响应用的性能。建议在需要异步操作时才使用中间件，因为它们可以让我们更好地处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a461fd48841e98940d15ef