如何从localStorage初始化Reducer的initialState？遇localStorage未定义错误

嗨，我来帮你搞定这个问题！你遇到的报错本质上是两个原因：一是Redux reducer是纯函数，依赖外部环境（比如localStorage）会破坏它的纯特性，导致状态不可预测；二是如果你的项目用了服务端渲染（SSR）或者静态生成（SSG），服务器环境根本没有localStorage这个浏览器API，直接调用肯定会报错。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：在创建Store时传入初始状态（最推荐） #

把读取localStorage的逻辑从reducer里移出来，放到创建Redux Store的代码中，只在浏览器环境下读取数据，服务器端返回默认空数组。

步骤1：修改Store初始化代码 #

import { createStore } from 'redux';
import cartReducer from './cart.reducer';
import { cartHelper } from '../helpers';

// 封装读取localStorage的逻辑，先判断是否在浏览器环境
const getInitialCartState = () => {
  // 只有当window存在时，才读取localStorage
  if (typeof window !== 'undefined') {
    return cartHelper.getCart();
  }
  return []; // 服务器端返回默认空数组
};

const store = createStore(
  cartReducer,
  getInitialCartState(), // 把读取到的本地数据作为初始状态传入
  // 这里可以加中间件、DevTools配置等
);

export default store;

步骤2：简化你的Reducer #

去掉reducer里读取localStorage的逻辑，让它回归纯函数：

import { cartConstants } from '../constants';

const initialState = [];

function cart(state = initialState, action) {
  switch (action.type) {
    case cartConstants.CART:
      // 你的购物车状态更新逻辑，比如添加/删除商品
      return [...state, action.payload]; // 示例逻辑，替换成你自己的代码
    // 其他action类型的处理
    default:
      return state;
  }
}

export default cart;

方案2：通过初始化Action加载本地数据 #

如果没法在创建Store时传初始值，可以在客户端页面挂载后，dispatch一个初始化Action，让Reducer响应这个Action来加载localStorage的数据。

步骤1：新增初始化Action类型 #

// cart.constants.js
export const cartConstants = {
  CART: 'CART',
  INIT_CART_FROM_LOCALSTORAGE: 'INIT_CART_FROM_LOCALSTORAGE'
};

步骤2：修改Reducer响应初始化Action #

import { cartConstants } from '../constants';

const initialState = [];

function cart(state = initialState, action) {
  switch (action.type) {
    case cartConstants.INIT_CART_FROM_LOCALSTORAGE:
      // 用本地存储的数据替换初始状态
      return action.payload;
    case cartConstants.CART:
      // 你的购物车更新逻辑
      return [...state, action.payload];
    default:
      return state;
  }
}

export default cart;

步骤3：在客户端组件中触发初始化 #

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { cartConstants } from './constants';
import { cartHelper } from './helpers';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    // 组件挂载后（仅在浏览器环境执行），读取本地数据并dispatch初始化Action
    const savedCart = cartHelper.getCart();
    dispatch({
      type: cartConstants.INIT_CART_FROM_LOCALSTORAGE,
      payload: savedCart
    });
  }, [dispatch]);

  return (
    // 你的页面内容
  );
}

export default App;

方案3：在Helper中添加环境判断（应急方案） #

如果你暂时不想改动太多代码，可以在cartHelper里先判断是否处于浏览器环境，避免报错：

// cart.helper.js
export const cartHelper = {
  getCart: () => {
    // 先检查window是否存在
    if (typeof window === 'undefined') {
      return [];
    }
    const cartData = localStorage.getItem('cart');
    return cartData ? JSON.parse(cartData) : [];
  }
};

不过这个方案只是临时规避错误，还是推荐前两种，因为Reducer保持纯函数更符合Redux的设计思想，也能避免后续其他问题。

内容的提问来源于stack exchange，提问作者S.M_Emamian