使用 React Native 和 Redux 热重载化简器时堆栈溢出

Question

我正在使用 React Native 和 HMR 的 Redux 。当我更改化简器时，接受会冒泡到我的configureStore.js文件，该文件调用以下内容：

if (module.hot) {
    module.hot.accept(() => {
        const nextRootReducer = require('../reducers/index').default;
        store.replaceReducer(nextRootReducer);
    });
}

但随后 HMR 继续在循环中搜索引用，直到堆栈溢出。难道某处有循环引用？如果是这样，有什么技巧可以追踪它吗？我尝试逐步执行require.js代码，但"引用"保留为数字，因此很难找到正确的文件。

Answer 1

如果你想检查它，这是我的确切代码：

export default function configureStore() {
  engine = createEngine('appstate');
  engine = filter(engine, null, ['appStateLoaded', 'appReady', 'tourReady', 'tourPage', 'tooltipStep', 'connected']);
  const cacheState = storage.createMiddleware(engine); //OLD PARAMETER:  , [LOAD, 'SET_TOUR_READY', 'SET_TOUR_PAGE']  ... replaced by reducer key filtering above instead
  enhancer = compose(
    applyMiddleware(thunk, cacheState),
    devTools({
      name: Platform.OS,
      hostname: '10.0.1.201',
      port: 5678,
      filters: {blacklist: ['REDUX_STORAGE_SAVE']}
    })
  );
  //reset reducer state on LOGOUT
  const appReducer = combineReducers(reducers);
  const rootReducer = (state, action) => {
    if (action.type === LOGOUT) {
      state = undefined;
    }
    return appReducer(state, action);
  }
  reducer = storage.reducer(rootReducer);

  store = createStore(reducer, enhancer);
  //retreive previously cached state and inject into Redux store!
  const load = storage.createLoader(engine);
  load(store)
      .then((newState) => console.log('Loaded state:', newState))
      .catch(() => console.log('Failed to load previous state'));

  if(module.hot) {
    module.hot.accept(() => {
      let nextRootReducer = storage.reducer(rootReducer);
      store.replaceReducer(nextRootReducer);
      load(store)
          .then((newState) => console.log('Loaded state:', newState))
    });
  }
  return store;
}

它应该给你一个坚实的例子，说明如何使用各种中间件与module.hot.accept......就"循环引用"而言，唯一要做的就是检查您的化简器并确保它们不会相互导入。我想我实际上已经看到了这个确切的问题——ES6 模块可以正确解决初始构建周期，但也许 HMR 构建过程不能。仅此而已。所以你最终认为你有工作的代码，但它基本上不支持HMR。我会设置一个快速测试应用程序并实现他们的hot.module.accept代码并验证它是否适合您。也许你必须调整一件事 - 但由于你的代码太少，很容易找到 - 然后在你自己的代码中进行相同的修复。如果这不能解决问题，请暂时最小化您在应用中使用 redux 执行的操作，直到找出导致问题的原因。..希望我有更多的建议。