使用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时堆栈溢出

回答

相关问题