2017-11-17 10 views
1

HMR/React Hot Reloaderはすべて、ビューに関係しているので、私はすべてを手に入れました。しかし、Reduxのを追加した後、など-Reduxのを反応させる...私はビューまたは減速を変更し、いつでも、私は次のエラーを取得する:エラーでリンク後React Hot Reload with Redux

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

約明示的に2歳のポストにつながります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; 
} 

、親1理由in boot.jsはです。 1つしかありませんか?

このエラーを取り除くにはどうすればよいですか?

または、このエラーを取り除き、reduxのホットローディング環境を適切に設定するにはどうすればよいですか。

関連する可能性のGithubの問題:さらなる研究の後

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

答えて

2

、それは問題が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)); 
    }) 
    } 
関連する問題