Redux初始状态已赋值但DevTools显示null，触发push类型错误

问题原因 #

• 本地存储残留旧数据：redux-persist会优先读取persist:root的本地数据，若之前存储的auth状态为null或结构不匹配，会直接覆盖你定义的initialState。
• 未配置PersistGate：如果入口文件没通过PersistGate包裹应用，redux-persist的状态恢复流程未完成，初始状态会暂时为null。

解决步骤 #

1. 清除旧本地存储数据 #

打开浏览器开发者工具（F12），进入Application标签，在Local Storage里找到persist:root项右键删除；或者直接在控制台执行：

localStorage.removeItem('persist:root')

刷新页面后，Redux DevTools的初始状态就会恢复为你设置的默认值。

2. 正确配置PersistGate #

在应用入口文件（如index.js）中，用PersistGate包裹根组件，等待persist状态恢复完成：

import { Provider } from 'react-redux';
import { store, persistor } from './path/to/Store'; // 替换为你的Store实际路径
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

loading={null}表示等待恢复时不显示加载组件，你也可以自定义加载内容。

3. 可选：添加状态兜底处理 #

为避免后续本地存储数据异常，可在slice中用函数式initialState做兜底：

import { createSlice } from "@reduxjs/toolkit";

const initialState = () => {
  try {
    const persistedAuth = localStorage.getItem('persist:root');
    if (persistedAuth) {
      const parsedRoot = JSON.parse(persistedAuth);
      const parsedAuth = JSON.parse(parsedRoot.auth);
      // 若解析后的状态存在cookies则复用，否则返回默认值
      return parsedAuth?.cookies ? parsedAuth : { cookies: [{value: 'test'}] };
    }
  } catch (e) {
    console.error('解析持久化状态失败:', e);
  }
  return { cookies: [{value: 'test'}] };
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setCookies: (state, action) => {
      const data = { value: action.payload.value };
      state.cookies.push(data);
    },
    removeCookies: (state) => {
      state.cookies = [];
    }
  },
});

export const { setCookies, removeCookies } = authSlice.actions;
export default authSlice.reducer;

验证 #

完成上述操作后：

• Redux DevTools中auth的初始状态将显示cookies: [{value: 'test'}]
• 点击"Add Cookies"按钮不再报错，cookies数组会正常添加新元素

内容的提问来源于stack exchange，提问作者Ayush Parui