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

【问题标题】：the best way to pass initial state with configureStore after migration from react-redux to redux-toolkit从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法
【发布时间】：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 中是否有任何数据？如果为真，则没有任何反应：如果将假用户发送到登录页面

【问题讨论】：

有人帮忙吗？

标签： reactjs redux react-redux redux-toolkit

【解决方案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,
});

【讨论】：