Question

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

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

我希望将其存储到另一个reducer中，而不是在这里登录控制台。

在短裤，这个想法是一个动作通过这个中间件流动，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));

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

1 个答案: