Redux add state field, without re-initialising everything

Question

I have a webapp and already people using my application. I use redux-thunk to save the state in localStorage.

When I want to add a new field to my redux initial state, this is not automatically added to their store (because I use Redux-Thunk to save the state, and the new field does not exist on the saved state).

I only see the solution to reinitialise the redux state to add the new field. I could do this, but that would mean people are logged out to their application, which is not user friendly.

So my question: How can I add a field to the initalState, and add it automatically to the saved redux-thunk state?

I am using react-redux, redux-toolkit and redux-thunk

My code:

const reducers = combineReducers({
  user: authReducer,
  groups: groupReducer,
});

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== "production",
  middleware: [thunk],
});

Answer 1

Alright, I found the solution after searching for one day. The name of the redux-toolkit tool createMigrate should be used. This is just a hard term to find via online search I guess.

Here is a tutorial I used to fix by problem: https://blog.bam.tech/developer-news/redux-persist-how-it-works-and-how-to-change-the-structure-of-your-persisted-store

The specifically say you should use createMigrate when

1. You need to keep the history of your modification.
2. You often change the form of your store and you have users in production local storage of
3. Your users are important to be kept.

In my case point 3 was applicable