使用带有react redux的localstorage setItem/getItem

Question

我是redux的新手，似乎找不到解决问题的答案。当我尝试插入本地存储时，如本解决方案所示->在Redux应用程序中向本地存储写入内容的位置。。。

稍后我在线程中收到一个错误，说我的状态未定义，我不知道为什么。

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

如果我试图取消对以下文件中的行的注释。。。

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-else条件设置了一个空对象而不是未定义对象(这就是错误消息所读取的内容(。因此，它将状态变为一个空对象，而不是让它单独存在。

解决方案代码。。。

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