导致超过最大调用堆栈大小的多个Redux中间件

Question

我得到了

Uncaught RangeError: Maximum call stack size exceeded
    at eval (index.js?4bd6:38)
    at Object.dispatch (applyMiddleware.js?6ce6:35)
    at dispatchChildActions (index.js?4bd6:33)
    at eval (index.js?4bd6:39)
    at Object.dispatch (applyMiddleware.js?6ce6:35)
    at dispatchChildActions (index.js?4bd6:33)
    at eval (index.js?4bd6:39)
    at Object.dispatch (applyMiddleware.js?6ce6:35)
    at dispatchChildActions (index.js?4bd6:33)

当我尝试在我的applyMiddleware()中添加redux-batched-actions中间件时

const store = createStore(
  enableBatching(appReducer), // added enableBatching
  composeWithDevTools(
    applyMiddleware(
      batchDispatchMiddleware, // and this
      sagaMiddleware,
      historyMiddleware,
    )
  )
)

怎么了？

Answer 1

我花时间给你看了一下源代码。这是个包漏洞。我已经提交了一个pull request。

先前的合并导致无限递归，其中非批处理操作被重复调度。我还认为您应该只使用中间件或更高阶的reducer，这取决于您的用例，请参阅ReadMe以获得较小的解释。请尝试修复，并让我知道，因为我没有一个项目目前设置。

希望这能解决你的问题！

Answer 2

不确定。

以下是对我有效的代码，也许它会有所帮助：

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;

const enhancers = composeEnhancers(
  applyMiddleware(ReduxThunk),
  autoRehydrate()
);

const initialState = {};
const store = createStore(
  reducers,
  initialState,
  compose(enhancers)
);
persistStore(store);

ReactDOM.render(
  <Provider store={store}>
    <div>
      <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/xxx" component={XXX} />
          </Switch>
          <Footer />
      </Container>
      </BrowserRouter>
    </div>
  </Provider>
  , document.querySelector('#app'));

Answer 3

当我忘记用大括号括起我的动作时，我也犯了同样的错误：

return bindActionCreators(...TaskActions, ...UserActions, dispatch)

而不是

return bindActionCreators({...TaskActions, ...UserActions}, dispatch)