【问题标题】:localStorage Getting Undefined StatelocalStorage 获取未定义状态
【发布时间】:2021-04-22 05:13:17
【问题描述】:

TL;DR:状态更新正确(从 Redux DevTools 中查看),但不会保留在本地存储中,因为它说状态是“未定义”(附上屏幕截图)。

解释: 我是 Redux 的新手。我正在尝试将我的状态保存到本地存储。当我从 Redux DevTools 和 console.log() 语句查看时,状态正在正确更新。但是,当我检查应用程序的本地存储时,它显示状态未定义。

我想要做什么: 每当我在我的一个组件中按下“添加”按钮时,我都会向我的购物车添加一项服务(然后我想将其保存到浏览器的本地存储中)。

以下是 Redux DevTools 和浏览器本地存储的截图:

请帮我查找并解决问题。

这是我的根组件 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 操作来将新商品添加到购物车。

【问题讨论】:

    标签: reactjs redux react-redux redux-persist redux-store


    【解决方案1】:

    store.getState 更改为store.getState()

    【讨论】:

      猜你喜欢
      • 2021-03-24
      • 1970-01-01
      • 2019-11-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-12
      • 1970-01-01
      相关资源
      最近更新 更多