Redux 热重载更改警告答案

【问题标题】：Redux Hot Reload Warning on changesRedux 热重载更改警告
【发布时间】：2016-08-19 16:30:04
【问题描述】：

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

提供者不支持即时更改store。您很可能会看到此错误，因为您更新到 Redux 2.x 和 React Redux 2.x，它们不再自动热重载减速器。有关迁移说明，请参阅 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 链接。

【问题讨论】：

我看到你在两个地方调用 createStore，你的问题是你想使用 createReduxStore 函数吗？ const store = createReduxStore(window.__app_data);
其实client.js中的“createStore”就是createReduxStore函数。我只是在客户端中以不同的方式命名。
哦，好吧，我刚看到 configureStore.js 并看到它的名称不同，所以我认为它不是同一个。您是否尝试过调试设置接受功能的创建部分？你在哪里叫它？
说实话，我不知道该怎么做。我尝试做一个 console.log 并传入 store.getState，但状态看起来在热重载之间没有改变。
你用的是什么浏览器？

标签： reactjs redux hot-module-replacement

【解决方案1】：

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

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

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

【讨论】：