1

React ReduxNative とHMR. レデューサーを変更すると、受け入れが次のconfigureStore.jsファイルを呼び出します。

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

しかし、HMR はスタック オーバーフローまでループ内の参照を検索し続けます。どこかに循環参照があるのでしょうか？もしそうなら、それを追跡するためのヒントはありますか？コードをステップ実行してみましたrequire.jsが、「参照」は数字として保持されているため、正しいファイルを追跡するのが難しくなっています。

4

1 に答える 1

0

調べたい場合の正確なコードは次のとおりです。

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コーディングして、それが機能することを確認します。1 つのことを調整する必要があるかもしれませんが、コードが非常に少ないため、簡単に見つけることができます。その後、独自のコードで同じ修正を行います。それでも問題が表面化しない場合は、問題の原因を特定するまで、一時的にアプリでの redux の使用を最小限に抑えます。..もっと提案があればいいのに。

于 2016-05-17T20:42:20.053 に答える