React中Redux reducer未执行：页面刷新无法恢复localStorage会话

我来帮你分析并解决这两个核心问题：

1. 页面刷新后sessionRegister未生效的原因与修复 #

你在App组件里直接调用sessionRegister(JSON.parse(storedSessionData))是关键错误：sessionRegister是Redux Toolkit生成的action creator，它本身只返回一个action对象，并不会直接触发Redux状态更新。必须通过dispatch派发这个action，才能让Reducer执行状态修改逻辑。

修复步骤很简单，在App组件中引入useDispatch Hook，用它来包裹action creator：

// 在App组件的import区域添加
import { useDispatch, useSelector } from 'react-redux';
import { sessionRegister } from './SessionSlice';

function App(props) {
  const sessionData = useSelector(selectSession);
  const dispatch = useDispatch(); // 新增获取dispatch的代码
  const storedSessionData = localStorage.getItem("sessionData");

  if (storedSessionData && !sessionData.authToken) {
    console.log("App init check. Storing :");
    const parsedData = JSON.parse(storedSessionData);
    console.log(parsedData);
    dispatch(sessionRegister(parsedData)); // 用dispatch触发action
  } else {
    if (!storedSessionData) console.log("No sessionData and no stored data");
  }

  // 其余渲染逻辑保持不变
}

2. 控制台日志重复打印的原因 #

这是React**严格模式（Strict Mode）**的正常调试行为。在开发环境下，Strict Mode会强制组件的渲染逻辑、副作用代码执行两次，目的是帮你排查潜在的代码问题（比如未清理的定时器、重复的副作用操作等）。生产环境下不会出现这个重复执行的情况。

如果你只是不想在开发阶段看到重复日志，可以暂时移除项目根组件外层的<React.StrictMode>标签，但更推荐保留它——它是开发阶段提前发现问题的实用工具。

额外优化：统一状态初始化逻辑 #

其实你可以把localStorage的读取逻辑直接整合到Redux Slice中，这样就能彻底删掉App组件里的初始化判断，让代码更简洁：
修改你的SessionSlice.js：

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

// 直接从localStorage加载初始状态
const storedSession = localStorage.getItem("sessionData");
const sessionInitialState = storedSession 
  ? JSON.parse(storedSession) 
  : { authToken: null, userLogin: null };

export const sessionSlice = createSlice({
 name: 'session',
 initialState: { value: sessionInitialState },
 reducers: {
  sessionRegister: (state, action) => {
    console.log("Storing:")
    console.log(action.payload)
    state.value = action.payload;
    // 把localStorage存储移到这里，统一管理状态与本地存储
    localStorage.setItem("sessionData", JSON.stringify(action.payload));
  },
  sessionDestroy: state => {
    console.log("Destroying session")
    state.value = { authToken: null, userLogin: null };
    localStorage.removeItem("sessionData");
  },
 },
});

// 其余导出代码保持不变

修改后，Redux会自动在初始化时读取localStorage的数据，页面刷新后状态会直接恢复，App组件里的初始化判断逻辑就可以完全移除了。

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