1

I get the following warning when I try to update any of my react components...

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.

As far as I can tell, my code looks like the instructions, but I still get the warning.

client.js

'use strict'

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import createStore from '../shared/store/createStore';

import routes from '../shared/routes';

const store = createStore(window.__app_data);
const history = browserHistory;

if (window.__isProduction === false) {
    window.React = React; // Enable debugger
}

if (module.hot) {
    module.hot.accept();
}

render (
    <Provider store={store}>
        <Router history={history} routes={routes} />
    </Provider>,
    document.getElementById('content')
)

configureStore.js

'use strict';

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';
import { selectSubreddit, fetchPosts } from '../actions'

export default function createReduxStore(initialState = {}) {
    const store = createStore(reducers, initialState, applyMiddleware(thunk));    

    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextReducer = require('../reducers').default;
            store.replaceReducer(nextReducer);
        });
    }

    return store;
};

Server.js

import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../../webpack.config.dev';

let compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
    hot: true,
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

Is there something I'm missing? Here is a link to the full Github Repo if you want to see the full src.

[Edited] Added server.js and github link.

4

1 回答 1

2

找到了答案。需要进行多项更改。

  1. 从client.js中删除 module.hot 代码（热重新加载该文件导致 Redux 和 React-Router 警告。
  2. 为我的 React 页面组件创建一个索引文件以从中导出。
  3. 将 module.hot 代码添加到新创建的索引文件中。
  4. 将所有 React 组件更改为类。const Page = () => () 不会在热重载时重新渲染。

进行这些更改后，一切都开始正常工作，我不再收到警告:-)

于 2016-04-27T12:59:35.353 回答