将本地存储setItem / getItem与react-redux一起使用

Question

我是Redux的新手，似乎找不到适合我问题的答案。 当我尝试按此解决方案中所示插入localstorage时-> 在Redux应用程序中哪里写入localStorage？ ...

我收到一个错误消息，指出我的状态在线程稍后未定义，我不确定为什么。

这是沙箱中的完整应用程序-> https://codesandbox.io/s/5yn3kqqlkk （我建议与chrome一起使用）

如果我尝试取消注释以下文件中的行...

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import "./Style.css";
import App from "./App";
import reducer from "./reducers";

let persistedState = localStorage.getItem("reduxState")
  ? JSON.parse(localStorage.getItem("reduxState"))
  : {};

const store = createStore(
  reducer,
  // persistedState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

// store.subscribe(() => {
//   localStorage.setItem('reduxState', JSON.stringify(store.getState()));
// });

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

应用程序崩溃，其属性处于读取状态为未定义-> https://i.imgur.com/h0kcpBD.png

谁能告诉我为什么会这样，我在做什么错？

Answer 1

看起来问题出在persistentState上，否则条件是设置一个空对象而不是未定义（错误消息正在读取的内容）。 因此，它是将状态更改为空对象，而不是单独保留它。

解决方案代码...

let persistedState = localStorage.getItem("reduxState")
  ? JSON.parse(localStorage.getItem("reduxState"))
  : undefined;