• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

안녕하세요 제로초님 redux-persist 질문 드립니다.

22.09.19 15:43 작성 조회수 920

0

안녕하세요 제로초님

redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다.

import userReducer from "@slice/userSlice";
import commonSlice from "@slice/commonSlice";
import localSlice from "@slice/locals";

export const persistConfig = {
  key: "root",
  version: 0,
  whitelist: ["locals"],
  storage,
};
export const rootReducer = (state, action) => {
  if (action.type === HYDRATE) {
    return {
      ...state,
      ...action.payload,
    };
  }
  return combineReducers({
    user: userReducer,
    common: commonSlice,
    locals: localSlice,
  })(state, action);
};
export const reducer = persistReducer(persistConfig, rootReducer);

이렇게 초기 셋팅을 해주었고,

 

export const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(logger),
  devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production",
});

export const persistor = persistStore(store);
const setupStore = (context: any): EnhancedStore => store;
const makeStore: MakeStore<any> = (context: any) => setupStore(context);

export const wrapper = createWrapper<Store>(makeStore);
export default wrapper;

이렇게 스토어를 만들었습니다.

그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나.

next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다.

둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?

답변 1

답변을 작성해보세요.

0

정문채님의 프로필

정문채

질문자

2022.09.19

예 저 문서를 토대로 작업한건데 약간 다른건

export const rootReducer = (state, action) => {
  if (action.type === HYDRATE) {
    return {
      ...state,
      ...action.payload,
    };
  }
  return combineReducers({
    user: userReducer,
    common: commonSlice,
    locals: localSlice,
  })(state, action);
};

이 부분입니다. action.type === HYDRATE 이부분을 주석처리하면 정상적으로 저장되기는 하나

wrpper.getServerSideProps의 작동이 멈추게 됩니다.

persist가 먼저 데이터를 불러온 후 HYDRATE가 getServerSideProps의 변경사항을 반영합니다. 지금 HYDRATE는 기존 state를 덮어씌우도록 되어있으므로 locals가 바뀌었으니 덮어씌울 수밖에 없습니다.