从react-redux迁移到redux-toolkit后如何通过configureStore传入初始状态保留登录会话

问题原因 #

你代码中的错误是configureStore用来传入预初始化状态的参数名不是initialState，而是**preloadedState**，你传的initialState属于未定义的配置项，Redux Toolkit不会识别处理，所以你从localStorage读取的用户信息没有被注入到store里。

正确代码示例 #

// 其他引入逻辑保持不变
import { configureStore } from '@reduxjs/toolkit'

const userInfoFromStorage = localStorage.getItem("userInfo")
  ? JSON.parse(localStorage.getItem("userInfo"))
  : null

const preloadedState = {
  userLogin: { userInfo: userInfoFromStorage },
}

const store = configureStore({
  reducer: {
    userLogin: userLoginReducer,
    userRegister: userRegisterReducer,
    userDetails: userDetailsReducer,
    // 其余reducer保持不变
  },
  preloadedState, // 替换原来的initialState，参数名必须为preloadedState
})

export default store

注意事项 #

• preloadedState的结构必须和你配置的根reducer结构完全对应，你当前的结构是匹配的，不需要调整，旧reducer和新的createSlice写法可以正常兼容，不会互相影响
• 如果修改后还是失效，可以先打印userInfoFromStorage确认localStorage中确实存储了有效的userInfo数据，排除存储侧的问题
• preloadedState的优先级高于各个reducer内部声明的初始状态，不用担心旧reducer的初始值会覆盖你从localStorage读取的数据

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