Webpack Redux-如何在热重新加载期间保持减速器状态

我使用React+Redux+Webpack+WebpackDevserver。启动热加载程序后，所有减速器都会重置为初始状态

我能让我的减速器保持在实际状态吗

我的网页包配置包含：

entry: [
    "./index.jsx"
],
output: {
    filename: "./bundle.js"
},
module: {
    loaders: [
        {
            test: /\.js|\.jsx$/,
            exclude: /node_modules/,
            loaders: ["react-hot","babel-loader"],
         }
    ]
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

我的减速器统计数据包括：

const initialState = {
...
}

export default function config(state = initialState, action) { ...

我仅通过以下方式启动我的Web包开发服务器：

"start": "webpack-dev-server",

---

假设Babel 6，您需要做以下工作：

import {createStore} from 'redux';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState);

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

      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

---

您可以在my上看到该方法的实际应用。

检查与存储创建相关的代码-

createStore（）

。 商店必须在

app.js

之外建立，否则每次HMR更新时都会刷新ot

错：

//app.js
从“React”导入React；
从“react dom”导入react dom；
从'react hot loader'导入{hot}；
从'react redux'导入{Provider}；
从'redux persist/lib/integration/react'导入{PersistGate}；
从“容器”导入{AppWidget}；
从“存储/创建存储”导入createStore；
常量{store，persistor}=createStore（）；// 只需在根元素中呈现应用程序，如下所示塑造代码

store.js:

export const store=createStore（rootReducer，integrateDevTools）

index.jsx:

这样就行了


ReactDOM.render(
,
document.getElementById（'root'），
)
如果（模块热）{
module.hot.accept（）模块
}
是的，你可以，事实上，如果你使用它，你会得到确切的结果，还有更多

react hot loader
将确保只更新您所更改的三项内容，并将状态保留在redux上

示例：您正在创建一个模式，该模式从API接收一些信息，然后将信息保留在redux上，如果您更改文本颜色，您知道您必须等待整个应用程序刷新，然后浏览器渲染，然后您必须打开模式，等待API等。但是使用react hot loader，更改该颜色后，您的模式仍将打开，并显示当前数据，只更新该颜色

按照程序包自述中的步骤进行操作：

1-您需要安装该软件包（是的，不需要依赖于开发人员，自述文件解释了更多细节，并解释了原因）

2-添加它。babelrc

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

3-在
App.js
文件的第一行导入
hot
（是的，上面是React，上面是ReactDOM），然后将根组件标记为热导出

//App.js
从'react hot loader/root'导入{hot}；
康斯特应用=（）=>你好，世界！；
导出默认热（App）；

就是这样，现在您应该有一个只关注最后更改的热重新加载，并为您保留redux状态

OBS:如果您使用挂钩，请查看更多详细信息
这似乎只支持reducers文件夹热加载，如何为容器、组件和操作热加载？容器和组件可以通过。不过，这有点像实验技术。这个问题仅限于还原剂，这就是为什么答案有限。这是微妙的，但非常重要的不同！
// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}