Store 구현

1. 로컬 스토리지 설정 정의

   const VERSION = 0;
   
   /** local Storage config */
   const localPersistConfig = {
   	key: `$${publicRuntimeConfig.RUNTIME_ENV}`,
   	version: VERSION,
   	storage,
   	whitelist: ["hotelRecentSearchStore"], // 로컬 스토리지에 유지 할 상태의 키 설정
   	migrate: createMigrate(migrations, {debug: true}),
   };
   

2. Root Reducer 정의

   const rootReducer = combineReducers({
     hotelRecentSearchStore: storeRecentSearchHotel,
   	...
   });
   

3. Persisted Reducer 정의

   const persistedReducer = persistReducer(localPersistConfig, rootReducer);
   

4. Redux Store 정의

   const store = configureStore({
   	reducer: persistedReducer,
   	devTools: ["development", "local"].indexOf(publicRuntimeConfig.RUNTIME_ENV) > -1,
   	middleware: getDefaultMiddleware =>
   		getDefaultMiddleware({
   			serializableCheck: false,
   		})
   });
   

   • Redux 스토어를 생성하고 설정합니다.
     • reducer: 사용 할 리듀서를 지정합니다.
     • devTools: 개발 도구를 활성화할지 여부를 설정합니다. 개발 및 로컬 환경에서만 활성화됩니다.
     • middleware: Redux 미들웨어를 설정합니다. **serializableCheck**를 비활성화하고 있습니다.

5. Store 타입 및 Hook 정의

   export type RootState = ReturnType<typeof store.getState>;
   export type AppDispatch = typeof store.dispatch;
   // Define Typed Hooks
   export const useAppDispatch: () => AppDispatch = useDispatch;
   export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
   export const persistor = persistStore(store);
   export default store;
   

Reducer 구현

1. UUID 생성 함수

   const uuidv4 = () =>
   	"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
   		const r = (Math.random() * 16) | 0;
   		const v = c === "x" ? r : (r & 0x3) | 0x8;
   		return v.toString(16);
   	});
   

2. 최근 검색 내역 데이터 구조 정의

   interface RecentSearchHotel {
   	... // 타입 지정
   }
   

3. 초기 상태 정의

   const initialState: { recent: RecentSearchHotel[] } = {
     recent: [],
   };
   

4. Redux Slice 생성

   const sliceStore = createSlice({
     name: "recent-search-hotel",
     initialState,
     reducers: {
       // 리듀서 함수들을 정의합니다.
     },
   });