redux - サンク アクション クリエータで redux-loop を使用する

Question

レデューサーからアクション クリエーターを呼び出すために redux-loop を使用しています。これは正常に機能します。

ただし、一部のアクション クリエーターにもサンクを使用しています。通常のアクション クリエーターをサンクに変換すると、redux-loop で使用できなくなります。

レデューサーで redux-loop からサンクを呼び出す方法はありますか?

Answer 1

redux-loop と redux-thunk をそのまま組み合わせることができませんでした。applyMiddleware(thunk)問題は、最初に redux-loopを呼び出してから redux-loopを呼び出した場合、サンクinstall()によってディスパッチされたアクションの効果が評価されないことです (dispatchミドルウェアによってサンクに渡されたものが redux-loop によってまだ強化されていないため)。一方、2 つを交換すると、エフェクトはサンクをディスパッチできません (dispatchエフェクトに使用する redux-loop のバージョンがサンク ミドルウェアで拡張されていないため)。

この問題を回避するには、次のかなりハックなストア エンハンサーを作成する必要がありました。

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)