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


以上。

相关推荐
酷酷的阿云8 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058710 分钟前
web端手机录音
前端
齐 飞16 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
newxtc24 分钟前
【国内中间件厂商排名及四大中间件对比分析】
安全·web安全·网络安全·中间件·行为验证·国产中间件
Wlq041527 分钟前
middleware中间件概述
中间件
Thuni_soft29 分钟前
华宇TAS应用中间件入围鲲鹏应用创新大赛2024全国总决赛
中间件
神仙别闹33 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html