React@16.x（62）Redux@4.x（11）- 中间件2 - redux-thunk

目录

• 1，介绍
• • 举例
• 2，原理和实现
• • 实现
• 3，注意点

1，介绍

一般情况下，action 是一个平面对象，并会通过纯函数来创建。

export const createAddUserAction = (user) => ({     type: ADD_USER,     payload: user, }); 

这样是有一些限制的

• 无法使用异步的，比如在请求接口之后再做一些操作。
• 或根据条件，同时 dispatch 多个 action。

而 redex-thunk 中间件的作用：允许 action 是一个函数，而不是一个平面对象。

举例

React@4.x 版本使用 redux-thunk@2.4.2 版本。

export const createAddUserAction = (user) => ({     type: ADD_USER,     payload: user, });  export const createSetLoadingAction = (isLoading) => ({     type: SET_LOADING,     payload: isLoading, });  export const fetchUsers = () => {     return async (dispatch) => {         dispatch(createSetLoadingAction(true))         const res = await getAllUsers();         dispatch(createAddUserAction(res))         dispatch(createSetLoadingAction(false))     } } 

// 使用 import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import { fetchUsers } from "./action/userAction";  const store = createStore(reducer, applyMiddleware(thunk)); store.dispatch(fetchUsers()) 

这个函数有3个参数：

1. dispatch，就是 store.dispatch；
2. getState，就是 store.getState；
3. extra，设置的额外的参数。

2，原理和实现

整体流程：

实现

中间件的写法参考 这篇文章

function thunkMiddleware(extra) {     return (store) => (next) => (action) => {         if (typeof action === "function") {             return action(store.dispatch, store.getState, extra);         }         return next(action);     }; }  const thunk = thunkMiddleware({}); thunk.withExtraArgument = thunkMiddleware; export default thunk; 

3，注意点

因为 redux-thunk 会修改 action 的类型，所以书写顺序通常会作为第一个。

以上。