Create-React-App 在热重载时丢失 Redux 存储状态答案

【问题标题】：Create-React-App loses Redux store state on hot reloadCreate-React-App 在热重载时丢失 Redux 存储状态
【发布时间】：2019-05-31 08:31:10
【问题描述】：

我已经使用 Create-React-App 创建了一个应用程序，并且热重载正在运行，但是 Redux 状态丢失了。如果我编辑任何组件，例如更改标题，状态丢失 - 最烦人的是用户退出，因为存储在状态中的令牌丢失。我关注了包括(https://redux.js.org/recipes/configuring-your-store) 在内的各种示例，但无法弄清楚这里出了什么问题。

有什么我错过的想法吗？谢谢！

index.js

const renderApp = () => {
    ReactDOM.render(
        <App />, document.getElementById('root')
    );
};

if (process.env.NODE_ENV !== 'production' && module.hot) {
    module.hot.accept('./App', renderApp);
}

renderApp();

store.js

const inititalState = {};

const store = createStore(
    rootReducer, 
    inititalState, 
    compose(applyMiddleware(thunk), 
        window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()));

if (process.env.NODE_ENV !== 'production' && module.hot) {
    module.hot.accept('./reducers', () => store.replaceReducer(rootReducer));
}

export default store;

reducers/index.js

import { combineReducers } from 'redux';
import errorReducer from './errorReducer';
import authReducer from './authReducer';

export default combineReducers({
    'errors': errorReducer,
    'auth': authReducer,
});

App.js：

class App extends Component {
    render() {
        return (
            <Provider store = { store }>
                <Router>
                    <div>
                        <Navbar />
                        <Route exact path="/" component={ Home } />
                        <div className="container">
                            <Route exact path="/register" component={ Register } />
                            <Route exact path="/login" component={ Login } />
                            <Route exact path="/forgotpassword" component={ ForgotPassword } />
                        </div>
                    </div>
                </Router>
            </Provider>
        );
    }
}

export default App;

来自 package.json：

  "dependencies": {
    "bootstrap": "^4.2.1",
    "classnames": "^2.2.6",
    "jquery": "^3.3.1",
    "jwt-decode": "^2.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "reactstrap": "^7.0.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "updeep": "^1.1.0"
  },

【问题讨论】：

标签： javascript reactjs redux create-react-app hot-module-replacement

【解决方案1】：

如果你只需要保存token你可以使用localstorage，如果你想保存大量数据你应该看看redux-persist。

使用 localStorage 保存的示例：

localStorage.setItem(token, res.data.token);

使用 localStorage 检索的示例：

localStorage.getItem(token);

用户注销时删除令牌的示例：

localStorage.removeItem(token);

【讨论】：

【解决方案2】：

看看redux-persist library，它保存了你的 redux 状态，然后重新水化它。

【讨论】：