使用react-hot-loader进行热更新，从而在Redux中丢失状态

Question

问题描述

环境科学

使用3.1.0创建项目版本create-react-app --typescript

问题的环境背景以及您尝试过哪些方法？

使用react-hot-loader进行热更新，在redux中丢失状态，但是热更新成功地修改了代码

复制方法

Source repository https://github.com/AfterThreeYears/typescript-react-start

npm run start启动localhost：3000，单击加号按钮以更新redux中的状态，然后修改SRC目录中的所有文件。 Redux状态已丢失。enter image description here

App.tsx

import { hot } from 'react-hot-loader/root';
import React from 'react';
import { Provider } from 'react-redux';
import configStore from './configStore';
import Test from './Test';

const App: React.FC = () => {
  const store = configStore();
  return (
    <Provider store={store}>
      <Test />
    </Provider>
  );
}

export default hot(App);

configStore.tsx

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

export default function configStore() {
  const store = createStore(reducers);

  if (module.hot) {
    module.hot.accept('./reducers', () => {
      store.replaceReducer(reducers);
    })
  }

  return store;
}

Test.tsx

const Test = () => {
  const dispatch = useDispatch();
  const count = useSelector<IState, number>((state) => state.counter.count);
  const add = () => dispatch({ type: 'add' });
  const minus = () => dispatch({ type: 'minus' });
  return (
    <div>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
      {count}
      update me
    </div>
  );
}

export default Test;

包装。 JSON附加依赖性

"react-app-rewire-hot-loader": "^2.0.1",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.9.0",
"react-hot-loader": "^4.12.13",

package.json启动脚本已修改为

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
},

您期望得到什么结果？实际的错误消息是什么？

在不丢失Redux中数据状态的情况下，实际上Redux中的数据状态丢失了