reactjs - localStorage 获取未定义状态
问题描述
TL;DR:状态更新正确(从 Redux DevTools 查看),但不会在本地存储中持续存在,因为它说状态是“未定义的”(附加屏幕截图)。
说明:
我是 Redux 的新手。我正在尝试将我的状态保存到本地存储。当我从 Redux DevTools 和console.log()
statements 中查看时,状态正在正确更新。但是,当我检查应用程序的本地存储时,它显示状态未定义。
我正在尝试做的事情: 每当我按下我的一个组件中的“添加”按钮时,我都会向我的购物车添加一项服务(然后我想将其保存到浏览器的本地存储中)。
以下是 Redux DevTools 和 Browser 的 Local Storage 的截图:
请帮助我找到并解决问题。
这是我的根组件的代码,App.js
其中包含我的Redux Store
和 localStorage 功能:
import Servicesdata from "./ServicesData";
import { createStore } from "redux";
import reducer from "./Reducer";
import { Provider } from "react-redux";
// Local Storage Functions:
function saveToLocalStorage(state) {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem("state", serializedState);
} catch (e) {
console.log(e);
}
}
function loadFromLocalStorage() {
try {
const serializedState = localStorage.getItem("state");
if (serializedState === null) return undefined;
return JSON.parse(serializedState);
} catch (e) {
console.log(e);
return undefined;
}
}
//initial store
const initialStore = {
services: Servicesdata,
cart: [],
bill: 0,
// quantity: 0,
total_items: 0, //saves total items in the cart
};
const persistedState = loadFromLocalStorage();
//store
const store = createStore(
reducer,
persistedState,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
store.subscribe(() => saveToLocalStorage(store.getState));
const App = () => {
return (
<Provider store={store}>
//more code
</Provider>
);
};
export default App;
在我的Reducer.js
中,我只是发送一个INCREASE
动作来将新商品添加到购物车中。
解决方案
更改store.getState
为store.getState()
。
推荐阅读
- javascript - Fabric JS如何从另一个函数调用一个函数
- java - 如何在android studio中添加公钥和私钥?
- jmeter - 覆盖授权标头
- c++ - 交叉编译找不到某些库
- java - Mockito 简化我的(复杂的)测试
- node.js - Multi Upsert ArangoDB
- unix - 詹金斯作业执行问题
- sql - 存储过程有多个 SELECT 语句
- flutter - 为什么只有部分图标在使用 Shader Mask 时出现渐变
- apache-spark - 在启用了 spark 身份验证和加密的 spark 独立集群上,无法通过 spark-submit 杀死 spark 应用程序