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

目录

1,介绍

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

js 复制代码
export const createAddUserAction = (user) => ({
    type: ADD_USER,
    payload: user,
});

这样是有一些限制的

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

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

举例

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

js 复制代码
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))
    }
}
js 复制代码
// 使用
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,原理和实现

整体流程:

实现

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

js 复制代码
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 的类型,所以书写顺序通常会作为第一个。


以上。

相关推荐
不如喫茶去4 分钟前
VUE查询-历史记录功能
前端·javascript·vue.js
持梦远方8 分钟前
重生之我拿捏Linux——《三、shell脚本使用》
前端·chrome
行走在顶尖16 分钟前
代码截断运行逻辑
前端
一枚前端小能手23 分钟前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
草莓熊Lotso24 分钟前
《C++ Web 自动化测试实战:常用函数全解析与场景化应用指南》
前端·c++·python·dubbo
Tech_Lin33 分钟前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
温宇飞34 分钟前
JavaScript 异常处理
前端
小岛前端39 分钟前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
用户15105810474340 分钟前
带leading和trailing的防抖和节流
前端
IT小哥哥呀43 分钟前
论文见解:REACT:在语言模型中协同推理和行动
前端·人工智能·react.js·语言模型