the best way to pass initial state with configureStore after migration from react-redux to redux-toolkit

Question

the scenario is when the user log in, i store his userInfo in localstorage, to avoid losing the session when i refresh the page, this is my previous code in Store.js with 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

this code used to work well for me, when i refresh the page i don't lose my session

and now i'm trying to migrate to redux-toolkit (i'll not change my old reducers, i"ll use the new way of code using createSlice with new ones only)

// 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 works well in my app with all reducers

except the fact that i can't pass userInfo from localstorage to the initialState of userLogin to keep it populated to avoid losing the session when i refresh the page (NB: in my components i check if there's any data in userLogin ? if true nothing happens : if false user is sent to Login page

Anyone to help ?

Ramzi OMARI
– Ramzi OMARI

2021-09-28 10:53:00 +00:00
Commented Sep 28, 2021 at 10:53 — Ramzi OMARI
– Ramzi OMARI, Commented Sep 28, 2021 at 10:53

Iain Simmons · Accepted Answer · 2021-11-16 00:37:55Z

12

You add the preloadedState property:

// 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

answered Nov 16, 2021 at 0:37

Iain Simmons

3801 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MartianMartian Over a year ago

this is not so smart. consider when you have multiple modules for initialState, there will have to be extra steps to put them together...

Roma Kim · Accepted Answer · 2021-11-01 07:16:39Z

I'm not sure if you can set initial state as a 2nd parameter in configureStore(). However, you can create a createSlice() method with your initial state and reducers(action.type).

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

After setting your initial state you can:

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

Then you can simply include them in configure store. Make sure they key is named reducer and also include .reducer at the end of your createSlice variable.

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

Collectives™ on Stack Overflow

the best way to pass initial state with configureStore after migration from react-redux to redux-toolkit

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related