redux root state setup to track user likes

persist-transform.ts

import { EntityState } from '@reduxjs/toolkit';
import { createTransform } from 'redux-persist';
import { LIKES_FEATURE_KEY } from '../likes/likes.slice';

const transformEntityStateToPersist = createTransform(
  // transform state on its way to being serialized and persisted.
  (
    entityState: EntityState<any>
  ): {
    ids: string;
    entities: any;
  } => {
    return {
      ...entityState,
      ids: JSON.stringify(entityState.ids),
      entities: JSON.stringify(entityState.entities),
    };
  },
  // transform state being rehydrated
  (entityState: { ids: string; entities: string }): EntityState<any> => {
    return {
      ...entityState,
      ids: JSON.parse(entityState.ids),
      entities: JSON.parse(entityState.entities),
    };
  },
  // define which reducers this transform gets called for.
  { whitelist: [LIKES_FEATURE_KEY] }
);

export { transformEntityStateToPersist };

root-state.initial.ts

import { initialLikesState } from '../likes/likes.slice';

import { RootState } from './root-state.interface';

export const initialRootState: RootState = {
  likes: initialLikesState
};

root-state.interface.ts

import { LikesState } from '../likes/likes.slice';

export interface RootState {
  likes: LikesState;
}

root.reducer.ts

import { combineReducers } from '@reduxjs/toolkit';

import { likesReducer } from '../likes/likes.slice';
import { RootState } from './root-state.interface';

export const createRootReducer = combineReducers<RootState>({
  likes: likesReducer
});

root.store.ts

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import { persistStore, persistReducer, PersistConfig } from 'redux-persist';

import { initialRootState } from './root-state.initial';
import { RootState } from './root-state.interface';
import { createRootReducer } from './root.reducer';

declare const process: any;

export const createRootStore = (persistConfig: PersistConfig<RootState>) => {
  const isDevelopment = process.env.NODE_ENV === 'development';

  const rootReducer = createRootReducer;
  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) => {
      const defaultMiddleware = getDefaultMiddleware({
        serializableCheck: false,
      });
      return isDevelopment
        ? defaultMiddleware.concat(logger)
        : defaultMiddleware;
    },
    devTools: isDevelopment,
    preloadedState: initialRootState,
  });

  const persistor = persistStore(store);

  return { store, persistor };
};