Redux中间件原理详解

最新推荐文章于 2024-08-26 09:15:58 发布

daysRoc

最新推荐文章于 2024-08-26 09:15:58 发布

阅读量1.5k

点赞数

分类专栏： Redux 深入浅出框架源码深入浅出前端技术文章标签： redux 中间件源码原理

本文链接：https://blog.csdn.net/Donspeng/article/details/83032832

版权

本文详细介绍了Redux中间件的概念，包括thunk、promise和logger中间件的用法。阐述了如何使用中间件，并解析了中间件的执行原理，指出其并非洋葱模型，而是单向执行。通过具体例子展示了在触发action时，action如何经过中间件并最终形成dispatch。还探讨了多个中间件的执行顺序，并解释了next的作用。最后，提到了compose函数在中间件组合中的应用。

摘要由CSDN通过智能技术生成

1、中间件是什么样子的

1.2 thunk中间件

function createThunkMiddleware(extraArgument) {

  return ({ dispatch, getState }) => next => action => {
    // 如果是函数，就执行函数
    if (typeof action === 'function') {
        return action(dispatch, getState, extraArgument);
    }
    // 如果不是，执行下一个中间件
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

1.2promise中间件

import isPromise from 'is-promise';
import { isFSA } from 'flux-standard-action';

export default function promiseMiddleware({ dispatch }) {
  return next => action => {
    if (!isFSA(action)) {
      return isPromise(action) ? action.then(dispatch) : next(action);
    }

    return isPromise(action.payload)
      ? action.payload
          .then(result => dispatch({ ...action, payload: result }))
          .catch(error => {
            dispatch({ ...action, payload: error, error: true });
            return Promise.reject(error);
          })
      : next(action);
  };
}

1.3logger中间件

const defaultLogger = ({ dispatch, getState } = {}) => {
  if (typeof dispatch === 'function' || typeof getState === 'function') {
    return createLogger()({ dispatch, getState });
  }
};
function createLogger(options = {}) {
  const loggerOptions = Object.assign({}, defaults, options);

  const {
    logger,
    stateTransformer,
    error