Question

我正在使用redux-loop从我的reducer中调用动作创建者。这通常很有效。

但是，我也在为我的一些动作创作者使用thunk。如果我采用常规动作创建器并将其转换为thunk，则它在redux循环中不再可用。

有没有办法在reducer中调用redux-loop中的thunk？

Answer 1

我建议您在增强器中applyMiddleware之前传递install。

createStore(reducer, initialState, compose(
  applyMiddleware(thunk),
  install()
));

applyMiddelware将捕获在redux-loop尝试调度它们之前传递给store.dispatch()的操作。现在，对于下一版本的redux-loop，我计划在应用自己的修改之前让install()接受商店的其他增强器，这样就不会出现问题。< / p>

Answer 2

我没有运气将redux-loop和redux-thunk结合起来。问题是，如果你先调用applyMiddleware(thunk)，然后调用redux-loop的install()，那么thunks调度的动作将不会评估它们的效果（因为中间件传递给thunk的dispatch不是还没有通过redux-loop增强;而如果你交换这两个，效果就无法调度thunk（因为thunk中间件没有增强dispatch redux-loop用于效果的版本。）

要解决这个问题，我需要编写以下非常hacky商店增强器：

import { applyMiddleware, compose } from 'redux'
import { install } from 'redux-loop'

export default function loopWithThunk(createStore) {
  let enhancedStore

  const storeSaver = (createStore) => (reducer, initialState) => {
    enhancedStore = createStore(reducer, initialState)
    return enhancedStore
  }

  const thunkMiddleware = () => next => action => {
    return (typeof action === 'function')
      ? action(enhancedStore.dispatch, enhancedStore.getState)
      : next(action)
  }

  return compose(
    storeSaver,
    install(),
    applyMiddleware(thunkMiddleware)
  )(createStore)
}

你可以像这样使用它：

const store = createStore(reducer, loopWithThunk)

使用带有thunk动作创建器的redux-loop

2 个答案: