redux 中间件

最新推荐文章于 2025-05-29 13:57:56 发布

weixin_33973609

最新推荐文章于 2025-05-29 13:57:56 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008036595

本文详细介绍了Redux中间件的执行流程及常见中间件如logMiddleware、discardMiddleware、redux-thunk和redux-promise的具体实现方式。同时提供了中间件函数的结构模板，并展示了如何使用这些中间件进行日志记录、异步操作等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

redux中间件的执行顺序

action ---> dispatcher ---> middleware 1 ---> middleware 2 ---> reducers

redux中间件函数必须遵循一个严格的函数结构

var anyMiddleware = function ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            // your middleware-specific code goes here
        }
    }
}

函数的第一级得到2个参数 dispatch 和 getState
调用 getState() 得到store中的整个state
函数的第二级提供 next 参数
执行next() 执行下一个中间件或者到redux ，这样就可以按顺序执行中间件
函数的第三级提供执行的 ancion 参数
根据action 可以执行相应的操作

常用的中间件

logMiddleware

打印日志

function logMiddleware ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            console.log('logMiddleware action received:', action)
            return next(action)
        }
    }
}

discardMiddleware

一个中间件丢弃所有发送的操作
（这个不是非常有用的,但有一点逻辑，它可以选择性地放弃一些action，而通过其他action）

function discardMiddleware ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            console.log('discardMiddleware action received:', action)
        }
    }
}

redux-thunk

异步中间件用于action异步操作

var thunkMiddleware = function ({ dispatch, getState }) {
    // console.log('Enter thunkMiddleware');
    return function(next) {
        // console.log('Function "next" provided:', next);
        return function (action) {
            // console.log('Handling action:', action);
            return typeof action === 'function' ?
                action(dispatch, getState) :
                next(action)
        }
    }
}

redux-promise

异步中间件用于action异步操作

var thunkMiddleware = function ({ dispatch, getState }) {
    // console.log('Enter thunkMiddleware');
    return function(next) {
        // console.log('Function "next" provided:', next);
        return function (action) {
           if (!isFSA(action)) {
              return isPromise(action) ? action.then(dispatch) : next(action);
              }
              
              
           return isPromise(action.payload)
              ? action.payload.then(
                  result => dispatch({ ...action, payload: result }),
                  error => {
                    dispatch({ ...action, payload: error, error: true });
                    return Promise.reject(error);
                  }
                )
              : next(action);
        }
    }
}

调用方式

function action(){
    return {
        type:'ADD_USER',
        payload:fetch('url')
    }
}