reactjs - localStorage が未定義状態になる

Question

TL;DR:状態は正しく更新されますが (Redux DevTools から表示)、状態が「未定義」であると表示されているため (スクリーンショットを添付)、ローカル ストレージには保持されません。

説明: Redux は初めてです。状態をローカル ストレージに保存しようとしています。Redux DevTools とconsole.log()ステートメントから表示すると、状態は正しく更新されています。しかし、アプリケーションのローカル ストレージを確認すると、状態が未定義であることがわかります。

私がやろうとしていること: コンポーネントの1つで「追加」ボタンを押すたびに、カートにサービスを追加しています(ブラウザのローカルストレージに保存したい)。

Redux DevTools とブラウザのローカル ストレージのスクリーンショットは次のとおりです。

問題を見つけて修正するのを手伝ってください。

myおよび localStorage 関数App.jsを含むルート コンポーネントのコードは次のとおりです。Redux Store

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