使用React Native和Redux重新加載Reducer時堆棧溢出

我使用Redux與React Native和HMR。當我改變一個減速器，接受泡到我configureStore.js文件，該文件調用此：使用React Native和Redux重新加載Reducer時堆棧溢出

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

但隨後HMR不斷尋找在一個循環引用，直到堆棧溢出。是不是有一個循環引用的地方？如果是這樣，任何提示追蹤它？我嘗試了一下require.js代碼，但'參考'被保存爲數字，因此難以追蹤正確的文件。

來源

2016-04-26 Robert Clouth

我有類似的問題。對於我來說，最初的'store'對象變得未定義，但是，當你直接使用'store'時，這是一個問題。起初，這是唯一的問題，但隨着時間的推移，當我更新減速器時，現在它們一起崩潰（死亡的紅幕）。我假設來自添加諸如'redux-storage'或其他中間件的軟件包。更新操作甚至更成爲一個問題 - 這些問題從未奏效。我的假設是我需要在傳遞給'module.hot.accept'的函數中做更多的事情。即重做我最初在'configureStore'中做的所有事情。 –

更新：你的問題讓我再次思考這個問題，我終於解決了它大聲笑。不知道它是否適用於您，但我所做的是2件事：我完全按照我的假設做了我沒有用redux存儲適當地重新配置商店的地方，所以我這樣做了。即我確保所有先前設置reducer的步驟都是在'module.hot.accept'中完成的。然後，就行動而言，我停止將它們導入到我的'configureStore'文件中，因爲我沒有使用它們 - 解決了更改我的操作文件使商店崩潰的問題，該問題無法正確「接受」變化。 –

這裏是我的確切的代碼，如果你要檢查它：

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了堅實的例子。 ......就「循環引用」而言 - 唯一要做的就是檢查你的reducer並確保它們不會導入對方。我想我已經看到了這個確切的問題 - ES6模塊可以正確解決初始構建週期問題，但也許HMR構建過程不能。就這樣。所以你最終認爲你的代碼有效，但它基本上不支持HMR。我會設置一個快速測試應用程序並實施他們的hot.module.accept代碼並驗證它適用於您。也許你必須調整一件事 - 但由於代碼很少，所以很容易找到 - 然後在自己的代碼中進行相同的修復。如果這不能解決問題，那麼請暫時將您在應用中使用redux所做的工作減至最少，直到找出造成問題的原因爲止。 ..我希望對你有更多的建議。

來源

2016-05-17 20:42:20

使用React Native和Redux重新加載Reducer時堆棧溢出

回答

相關問題