使用中间件对每个操作分配额外的操作

Question

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

如果我错了，请纠正我，上面应该是创建 redux 中间件的模板。我想知道是否可以在此中间件中调度额外的操作？将其视为一个记录器函数，我正在尝试记录正在调度的所有操作。

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

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

Answer 1

不确定我是否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));