TL;DR: 状态更新正确(从 Redux DevTools 中查看),但不会保留在本地存储中,因为它表示状态为“
undefined
”(附有屏幕截图)。
说明: 我是 Redux 新手。我正在尝试将我的状态保存到本地存储。当我从 Redux DevTools 和
console.log()
语句查看时,状态正在正确更新。但是,当我检查应用程序的本地存储时,它显示状态未定义。
我正在尝试做的事情: 每当我按下某个组件中的“添加”按钮时,我就会向我的购物车添加一项服务(然后我想将其保存到浏览器的本地存储中)。
以下是 Redux DevTools 和浏览器本地存储的屏幕截图:
请帮我找到并解决问题。
这是我的根组件的代码
App.js
,其中包含我的 Redux 存储和本地存储功能:
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()
。