Next.js 13中store.getState is not a function错误的解决方法

错误根源 #

你的代码中错误地将整个Redux Store实例存入了localStorage，而非Store的状态数据。Store实例包含getState、dispatch等方法，这些方法无法被JSON序列化。页面刷新时，你把序列化后解析出的普通对象（非法的Store状态）作为preloadedState传入configureStore，导致Store初始化异常，最终触发store.getState is not a function错误。

修复步骤 #

1. 修正localStorage存储逻辑 #

将store.subscribe回调中的JSON.stringify(store)改为JSON.stringify(store.getState())，只存储Store的状态数据：

store.subscribe(() => {
  localStorage.setItem("myState", JSON.stringify(store.getState()));
});

2. 清理旧的错误数据 #

由于之前存入了非法的Store实例数据，需先清空localStorage中的旧数据：
在浏览器开发者工具控制台执行：

localStorage.removeItem("myState")

3. 可选：优化状态解析容错 #

添加try-catch包裹JSON解析逻辑，避免旧数据或非法数据导致解析失败：

if (persistedStateJson) {
  try {
    persistedState = JSON.parse(persistedStateJson);
  } catch (e) {
    persistedState = {};
  }
}

修正后的完整代码 #

"use client";

import { configureStore } from "@reduxjs/toolkit";
import productSlice from "./features/productSlice";

const persistedStateJson = localStorage.getItem("myState");

let persistedState = {};

if (persistedStateJson) {
  try {
    persistedState = JSON.parse(persistedStateJson);
  } catch (e) {
    persistedState = {};
  }
}

const store = configureStore({
  reducer: {
    product: productSlice // 建议给reducer起更清晰的命名，非强制但更规范
  },
  preloadedState: persistedState,
});

// 仅存储Store的状态数据，而非Store实例
store.subscribe(() => {
  localStorage.setItem("myState", JSON.stringify(store.getState()));
});

export default store;

原理说明 #

store.getState()返回纯JavaScript对象格式的状态数据，完全支持JSON序列化与反序列化。将其存入localStorage后，解析出的对象可直接作为preloadedState传入configureStore，保证Store初始化时状态结构合法，getState等方法能正常工作。

内容的提问来源于stack exchange，提问作者Sai Charan