如何将自定义初始状态传入Redux Toolkit配置的Store？

你当前代码的核心问题是：已经从localStorage读取了用户信息、组装好了初始状态对象，但没有将这个对象传入configureStore的配置中。
Redux Toolkit 的configureStore提供了preloadedState配置项，专门用来接收全局预加载初始状态，直接传入即可让初始状态生效。

修正后完整代码 #

import { configureStore } from '@reduxjs/toolkit'
import { postListReducer, postDetailsReducer } from './reducers/postReducers'
import { userLoginReducer } from './reducers/userReducers'

// 本地存储读取逻辑要放在store创建之前执行，避免时序问题
const userInfoFromStorage = localStorage.getItem('userInfo') ?
  JSON.parse(localStorage.getItem('userInfo')) : null

const initialState = {
  userLogin: { userInfo: userInfoFromStorage }
}

const store = configureStore({
  reducer: {
    postList: postListReducer,
    postDetails: postDetailsReducer,
    userLogin: userLoginReducer,
  },
  // 传入预加载初始状态
  preloadedState: initialState
})

export default store

注意事项 #

• 传入的preloadedState数据结构必须和reducer的层级结构完全对应：你的userLogin状态切片对应userLoginReducer，因此该切片的初始值要挂在userLogin字段下，你当前定义的initialState结构是正确的，不需要调整
• 不要在reducer函数内部直接读取localStorage设置初始值，reducer必须是纯函数，所有外部数据的注入都要在store创建阶段完成
• 建议给localStorage读取逻辑加错误容错，避免本地存储数据损坏导致JSON.parse报错阻塞页面加载：

let userInfoFromStorage = null
try {
  const storageValue = localStorage.getItem('userInfo')
  userInfoFromStorage = storageValue ? JSON.parse(storageValue) : null
} catch (err) {
  // 数据损坏时直接清除无效存储
  localStorage.removeItem('userInfo')
}

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