在redux中间件内部调用调度

时间:2018-03-27 22:57:45

标签: reactjs redux

我正在尝试将redux-simple-auth集成到我现有的reudx API中。我的旧实现使用了本机fetch,我添加了标题等。这个新模块提供了一个fetch替换,但是它返回了一个redux动作,并且在解决如何设置方面有点困难。

我的商店:

function configureStore (initialState) {
  const middlewares = [
    authMiddleware,  // This is from rediux-simple-auth
    apiMiddleware, // My own middleware
    thunk

  ]

  const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(...middlewares), getInitialAuthState({ storage }))
  )
}

我的中间件简化了:

import { fetch } from 'redux-simple-auth'
export default store => next => action => {      
  ...
  next(my start action...)
  return store.dispatch(fetch(API_ROOT + endpoint, { method }))  
    .then(response => {
       next(my success/fail action...)
    })

}

当我运行这个时,我可以在redux检查器中看到我的启动和失败动作,但不能看到取指令(它确实触发了一个FETCH)

如果我拨打next而不是store.dispatch,那么它的工作原理是它会触发行动,但它不会返回我无法获得结果的承诺。

如何修复此流程?

1 个答案:

答案 0 :(得分:5)

next不是dispatch。试试这个:

export default ({dispatch}) => next => action => ...

使用dispatch发送新操作并使用next(action)原始操作传递给下一个中间件。