Redux Hot Reload警告更改

时间:2016-04-26 03:40:32

标签: reactjs redux hot-module-replacement

当我尝试更新任何反应组件时,我收到以下警告......

  

提供商不支持动态更改store。您很可能会看到此错误,因为您已更新到Redux 2.x和React Redux 2.x,它们不再自动热重新加载Reducer。有关迁移说明,请参阅https://github.com/reactjs/react-redux/releases/tag/v2.0.0

据我所知,我的代码看起来像指示,但我仍然收到警告。

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

我有什么遗失的东西吗?如果您想查看完整的src,请输入完整的Github Repo

[已编辑]添加了server.js和github链接。

1 个答案:

答案 0 :(得分:2)

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

  1. client.js 中删除module.hot代码(热重新加载该文件会导致Redux和React-Router警告。
  2. 为要从中导出的React页面组件创建索引文件。
  3. 将module.hot代码添加到新创建的索引文件中。
  4. 将所有React组件更改为类。 const Page =()=&gt; ()不会通过热重新加载重新渲染。
  5. 进行这些更改后,一切都开始正常运行,我不再收到警告: - )