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

Posted 2023-02-19

【中文标题】从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法

【英文标题】：the best way to pass initial state with configureStore after migration from react-redux to redux-toolkit

【发布时间】：2021-11-17 07:55:59

【问题描述】：

场景是当用户登录时，我将他的用户信息存储在本地存储中，以避免在我刷新页面时丢失会话， 这是我之前在 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 在我的应用中与所有 reducer 一起运行良好

除了我无法将 userInfo 从 localstorage 传递到 userLogin 的 initialState 以保持填充以避免在刷新页面时丢失会话 （注意：在我的组件中，我检查 userLogin 中是否有任何数据？如果为真，则没有任何反应：如果将假用户发送到登录页面

【问题讨论】：

有人帮忙吗？

【参考方案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

【参考方案2】：

我不确定您是否可以将初始状态设置为 configureStore() 中的第二个参数。但是，您可以使用初始状态和 reducers(action.type) 创建一个 createSlice() 方法。

const initialState = 
  userLogin:  userInfo: userInfoFromStorage ,

设置初始状态后，您可以：

const userInfoSlice = createSlice(
      name: "userInfo",
      initialState: initialState,
      reducers: 
         yourReducerFunction() 
             //You can manipulate the state in here 
           
        ,
      ,
    );

然后您可以简单地将它们包含在配置存储中。确保它们的键名为 reducer，并在 createSlice 变量末尾包含 .reducer。

const store = configureStore(
  reducer: counterSlice.reducer,
);