时间戳

首页 > 解决方案 > 使用中间件对每个动作调度额外动作

reactjs - 使用中间件对每个动作调度额外动作

问题描述

export default ({ dispatch, getState }) => next => action => {
  return next(action);
};

说错了请指正，以上应该是创建redux中间件的模板。我想知道是否可以在这个中间件中调度一个额外的动作？把它想象成一个记录器函数，我试图记录所有正在调度的操作。

我希望将其存储到另一个减速器中，而不是在这里进行控制台日志记录。

简而言之，这个想法是一个动作流过这个中间件，1 个原始动作 + 1 个日志动作都被调度

标签： reactjsreact-nativeredux

解决方案

不确定我是否收到您的问题if it's possible to dispatch an extra action in this middleware?，但您可以发送任意数量的操作，例如：

export const getBooks = ({dispatch}) => next => action => {
  next(action);
  if (action.type === 'GET_BOOKS') {
    dispatch({type:'API_REQUEST', payload:'yourUrl'});
  }
  if (action.type === 'SOMETHING_ELSE') dispatch(anotherAction());
};

然后你可以添加另一个中间件来观察这个中间件发送的动作，即

export const api = ({dispatch}) => next => action => {

  if(action.type === 'API_REQUEST') {
    const { url } = action.payload;

    fetch(url).then(response => response.json())
      .then((data) => dispatch({ type: 'onSuccess', payload: data }))
      .catch(error => dispatch({ type: 'onError', payload: error }))
  }
  return next(action)
};

显然，在您的商店，第一个需要先于第二个，即

const middlewares = [getBooks, api];
const store = createStore(yourReducer,applyMiddleware(...middlewares));

推荐阅读