从react-redux迁移到redux-toolkit后使用configureStore传递初始状态的最佳方法

Question

场景是当用户登录时，我将他的用户信息存储在本地存储中，以避免在刷新页面时丢失会话，这是我之前在 Store.js 中使用react-redux 的代码

// import

const reducer = combineReducers({
  userLogin: userLoginReducer,
  userRegister: userRegisterReducer,
  // more reducers
})

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

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

const middleware = [thunk]

const store = createStore(
  reducer,
  initialState,  // i used to pass initial state (with userInfo in it) whith createStore
  composeWithDevTools(applyMiddleware(...middleware))
)

export default store

这段代码过去对我来说效果很好，当我刷新页面时，我不会丢失会话

现在我正在尝试迁移到 redux-toolkit （我不会更改旧的减速器，我将使用新的代码方式，仅使用 createSlice 和新的减速器）

// import

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

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

const store = configureStore({
  reducer: {
    userLogin: userLoginReducer,
    userRegister: userRegisterReducer,
    userDetails: userDetailsReducer,
    // more reducers
  },
  initialState, // i don't know if this way is correct to add initial state to configureStore, it doesn't work
})

export default store

configureStore 在我的应用程序中与所有减速器配合良好

• 除了我无法将 userInfo 从 localstorage 传递到 userLogin 的初始状态以保持其填充以避免在刷新页面时丢失会话这一事实（注意：在我的组件中，我检查 userLogin 中是否有任何数据？如果 true 则不会发生任何情况） ：如果错误用户被发送到登录页面

Answer 1

您添加preloadedState属性：

// import

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

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

const store = configureStore({
  reducer: {
    userLogin: userLoginReducer,
    userRegister: userRegisterReducer,
    userDetails: userDetailsReducer,
    // more reducers
  },
  preloadedState: initialState,
})

export default store