React@16.x(62)Redux@4.x(11)- 中间件2 - redux-thunk-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,设置的额外的参数。
上一篇:VSCODE 驯服日记(二)对MPE的格式进行调整


下一篇:Java并发04之线程同步机制