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


以上。

相关推荐
RickyWasYoung39 分钟前
【matlab】字符串数组 转 double
android·java·javascript
csj501 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少1 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
一只小透明啊啊啊啊1 小时前
Java的中间件
java·开发语言·中间件
好玩的Matlab(NCEPU)2 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰2 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3282 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476682 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin2 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风2 小时前
小程序中获取元素节点
前端·小程序