React Hot Reload mit Redux

Question

Ich habe alles mit HMR/React Hot Reloader arbeiten, wie es Ansichten betrifft. Aber nach redux Zugabe reagieren-redux, etc ... jederzeit ändere ich eine Ansicht oder Reduzierer ich folgende Fehlermeldung erhalten:

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

Nach dem Link in dem Fehler führt zu einer 2 Jahren alten Post über explizit mit replaceReducer, also habe ich das gemacht.

Meine Versionen:

"Redux": "^ 3.7.2" "reagieren-Redux": "^ 5.0.6"

Ich habe das Gefühl, dies ist meist aufgrund meiner fehlenden Verständnis dafür, wo und wie man meine modul.hot.accept-Aufrufe platziert (und wenn Sie mehrere haben können?). Relevanter Code ist unten.

boot.js (Einstiegspunkt)

import { Provider } from 'react-redux'; 
import { AppContainer } from 'react-hot-loader'; 
import { ConnectedRouter } from 'react-router-redux'; 

import App from './App'; 

import { configureStore, history } from './store/configureStore'; 

let store = configureStore(); 

function renderApp() { 
    ReactDOM.render(
     <AppContainer> 
     <Provider store={store}> 
      <ConnectedRouter history={history}> 
      <App /> 
      </ConnectedRouter> 
     </Provider> 
     </AppContainer> 
     , document.getElementById("app")); 
} 

renderApp(); 

if (module.hot) { 
    module.hot.accept(() => { 
     renderApp(); 
    }) 
} 

configureStore.js

import createHistory from 'history/createBrowserHistory'; 
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'; 
import { routerMiddleware, routerReducer } from 'react-router-redux'; 
import thunk from 'redux-thunk'; 

import DevTools from '../components/DevTools'; 

import * as rootReducer from '../services/rootReducer'; 

const composeEnhancers = compose; 

export const history = createHistory(); 

const middleware = routerMiddleware(history); 

export function configureStore(initialState) { 
    const reducers = { ...rootReducer, router: routerReducer }; 

    const store = createStore(
    combineReducers(reducers), 
    initialState, 
    composeEnhancers(
     applyMiddleware(middleware, thunk), 
     DevTools.instrument() 
    ) 
); 

    if (module.hot) { 
    module.hot.accept('../services/rootReducer',() => { 
     const nextRootReducer = require('../services/rootReducer').default; 
     const finalReducer = {...nextRootReducer, router: routerReducer }; 
     store.replaceReducer(finalReducer); 
    }) 
    } 

    return store; 
} 

Die module.hot.accept in meinem configureStore ist man nie wirklich genannt, weil die Mutter in boot.js ist. Kann es nur 1 geben ?!

Wie kann ich diesen Fehler beheben?

Oder lassen Sie mich anders formulieren: Wie kann ich diesen Fehler loswerden und eine reaktive heiße Ladeumgebung mit Redux-Speichern richtig einrichten?

Möglicherweise relevant Github Ausgabe:

https://github.com/reactjs/react-redux/issues/259

Answer 1

Nach weiteren Untersuchungen stellt sich heraus, das Problem auf den Umfang des in boot.js. Anruf annehmen zurückzuführen Da im Wesentlichen ALLES von der App auf der Stammebene beobachtet wurde, wurde die gesamte App bei einem Reducerwechsel neu geladen, so dass die HMR-Akzeptierung des Reducers nie aufgerufen wurde. Unten ist die Arbeitsversion.

boot.js

if (module.hot) { 
    module.hot.accept('./containers/App.js',() => { 
     const nextApp = require('./containers/App').default; 
     renderApp(nextApp); 
    }) 
} 

configureStore.js

if (module.hot) { 
    module.hot.accept('../services/rootReducer',() => { 
     const nextRootReducer = require('../services/rootReducer'); 
     const finalReducer = {...nextRootReducer, router: routerReducer }; 
     store.replaceReducer(combineReducers(finalReducer)); 
    }) 
    }