React Hot Reload with Redux

Question

HMR/React Hot Reloader와 관련된 모든 것은 뷰와 관련이 있습니다. 그러나 REDUX를 추가 한 후, REDUX-반응 등 ... 언제 나는 다음과 같은 오류 얻을 뷰 또는 감속기 수정 : 명시 적으로 약 2 년 이전 게시물에 대한 오류의 링크 리드에 따라

<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.

을 replaceReducer를 사용 했으니까요.

내 버전 :

"REDUX" "^ 3.7.2" "반응-REDUX을": "^ 5.0.6"

나는이 대부분입니다 느낌이 때문에 내 부족 내 module.hot.accept 호출을 배치 할 위치와 방법에 대한 이해 (그리고 여러 개를 가질 수 있다면?). 관련 코드는 다음과 같습니다. 내 configureStore의 module.hot.accept 실제로 호출되지 않습니다

boot.js (진입 점)

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

, 부모 하나 때문에 boot.js에 있습니다. 수있는 유일한 1 ?!

어떻게이 오류를 제거 할 수 있습니까?

또는이 오류를 없애고 redux 상점과 반응 핫로드 환경을 올바르게 설정하려면 어떻게해야합니까?

아마 관련 Github의 문제 : 더 연구 한 후

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

Answer 1

, 그것은 문제가 boot.js.의 동의를 호출의 범위에 기인 밝혀 근본적으로 루트 수준 앱에서 모든 것을보고 있었기 때문에 전체 앱이 감속기 변경에 다시로드되었으므로 감속기의 HMR 수락이 호출되지 않았습니다. 아래는 작업 버전입니다.

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