Stack-Überlauf, wenn ein Reducer mit React Native und Redux

Question

schnell nachgeladen wird Ich verwende Redux mit React Native und HMR. Wenn ich ein Reduktions ändern, nehmen die Blasen bis zu meiner configureStore.js-Datei, die diese Anrufe:

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

Aber dann hält HMR auf die Referenzen in einer Schleife, bis der Stapelüberlauf zu suchen. Könnte es sein, dass es irgendwo einen Zirkelbezug gibt? Wenn ja, irgendwelche Tipps, um es aufzuspüren? Ich habe versucht, durch den Code require.js zu gehen, aber die "Referenzen" werden nur als Zahlen gehalten, die es schwer machen, die richtige Datei aufzuspüren.

Answer 1

Hier ist meine genauen Code, wenn Sie es untersuchen wollen:

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; 
} 

Es sollte Ihnen ein solides Beispiel dafür, wie mit module.hot.accept verschiedenen Middleware zu verwenden. ... Soweit die "Zirkelreferenz" Sache geht - das einzige, was zu tun ist, überprüfen Sie Ihre Reduzierungen und stellen Sie sicher, dass sie sich nicht gegenseitig importieren. Ich denke, ich habe dieses genaue Problem in der Tat gesehen - ES6-Module können das anfängliche Bauen der Zyklen richtig ansprechen, aber vielleicht kann der HMR-Bauprozess nicht. Und das ist alles. Sie denken also, Sie haben Code, der funktioniert, aber HMR wird im Grunde nicht unterstützt. Ich habe eine schnelle Test-App eingerichtet und implementiere ihren hot.module.accept Code und verifiziere, dass er für dich funktioniert. Vielleicht müssen Sie eine Sache anpassen - aber da Sie so wenig Code haben, wird es leicht zu finden sein - und dann denselben Fehler in Ihrem eigenen Code machen. Wenn das Problem dadurch nicht behoben wird, minimieren Sie das, was Sie mit Redux tun, vorübergehend in Ihrer App, bis Sie feststellen, was das Problem verursacht hat. ..Wish Ich hatte mehr Vorschläge für dich.