store.ts

전체코드

//스토어 만들기 위해
import { configureStore } from '@reduxjs/toolkit';

// 데이터를 저장할 리듀서를 가져옴
import rootReducer from './reducer'; 

//스토어의 상태를 저장,복원하기 위한 라이브러리
import { persistStore, persistReducer } from 'redux-persist';
//세션과 스토리지 둘중 스토리지 선택 
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key:'root',//저장할 데이터 key
    storage, //사용할 엔진
}

//Redux Store와 redux-persist를 연동
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Redux 스토어를 생성
// 리듀서는 원래의 루트 리듀서에 Redux Persist의 지속성 관련 로직을 추가
const store = configureStore({
 reducer:persistedReducer,
  middleware: (getDefaultMiddleware) => {
    const defaultMiddleware = getDefaultMiddleware();
    return [...defaultMiddleware];
});


//다른 파일에서 가져와 사용할 수 있다
export const persistor = persistStore(store);
export default store;

학습

Redux Store와 redux-persist를 연동(사용 하기위해 라이브러리 연동)

• persistConfig객체를 만든다
• persistConfig와 rootReducer를 파라미터로 받는 persistedReducer 만든다

export const persistor = persistStore(store);

• Redux Persist가 설정된 Redux 스토어를 초기화하고 Redux 상태의 지속성을 관리하는 데 사용

middleware: (getDefaultMiddleware)=>{}

• Redux Toolkit이 제대로 동작하고 비동기 작업을 처리하기 위해 필요
• 기본 미들웨어를 가져온 후 복사해서 반환하여, 기본 미들웨어를
  변경하지 않고 추가적인 미들웨어를 편리하게 추가