0

I created my themeSlice with hardCoded themes in mind initialState:{theme: "lightTheme"}. I quickly realized a better way to do it was by using a simple boolean value initialState: { darkTheme: false }.

After making the changes and running the program again, I still see in console "theme": "lightTheme"

I am using React-toolkit and RTK-Query in this project, not sure if my setup is the cause.

This is my Store setup:

const rootReducer = combineReducers({
  test: testSlice,
  theme: darkThemeSlice,
  [apiSlice.reducerPath]: apiSlice.reducer,
});

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  devTools: true,
  middleware: (getDefaultMiddleWare) =>
    getDefaultMiddleWare({ serializableCheck: false }).concat(
      apiSlice.middleware
    ),
});

export default store;

I cleared cache and re-ran my app, and nothing changed.

Any idea what is happening here?

Arcanus
  • 642
  • 5
  • 20

2 Answers2

2

You are using redux-persist. initialState is "the state if there is no state already - but in your case there is always the state from when you were on that website before.
As such, initialState in your case only takes place when a user visits the website for the first time, ever.

If you are still in development, you can just use your browser devtools to reset local storage. If this is deployed somewhere, you cannot go into all your users' browsers, so you will have to create a migration in redux-persist to move people from your first initial state to your second initial state. (Especially necessary if your state changes structure!)

phry
  • 35,762
  • 5
  • 67
  • 81
  • Thank you so much for this response, this is exactly what i was going through and I had an intuition that it could be coming from redux-offline. NOw let's say that you have already deployed your application, how would you create a migration in redux? – Paul Marmagne Mar 27 '23 at 05:32
  • 1
    Redux-persist has the concept called "migration" - it's a functionality in the library. Look into their documentation. If you are using redux-offline instead, I would assume they have something in their docs as well. – phry Mar 27 '23 at 06:37
  • Thank you so much, I'll make sure to keep that in mind when I deploy my app – Paul Marmagne Mar 28 '23 at 17:48
  • What if the slice/reducer is not persisted? And I wanna update an array, Is migration required? – Brogrammer Jul 24 '23 at 19:24
  • @Brogrammer if it is not persisted, the user will start at your initialState on every page refresh - there is nothing to migrate. – phry Jul 24 '23 at 19:58
0

to clear wrong and hard set values in initial state you can try

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  blacklist: ["theme"],
};

and once cleared you can remove the blacklist item.

Anand Giri
  • 11
  • 4