[persist-Redux] blacklist가 적용이 안 되는 문제

💛 blacklist란?

---

우선 persist-Redux에서 blacklist가 뭘까요??
저희는 blacklist를 이용해 persist를 제외하고 싶은 부분을 설정할 수 있습니다.
whitelist와는 반대되는 개념이네요!
 

🐥💬

개념을 알았으니 문제점으로 넘어가보겠습니당!

---

💛 문제점

persist Redux를 사용하던 중에 blacklist를 적용하려고 하는데 적용이 되지 않는 문제가 있었습니다.
아래 이미지에서 왼쪽이 새로고침 전 코드입니다.
저는 persist redux를 사용중이기 때문에 원래는 새로고침을 해도 데이터가 지워지지 않는 것이 맞습니다.
하지만 blacklist에 해당 reducer를 추가해놓은 상태였기 때문에 새로고침을 할 때 데이터가 지워져야 합니다.
오른쪽 이미지는 새로고침 후 코드인데 console창을 보시면 데이터가 그대로 남아있는 것을 확인할 수 있습니다.

←새로고침 전 코드 / 새로고침 후 코드 →

---

이 문제가 발생했을 때의 코드를 확인해보겠습니다.

🤔 문제가 발생한 코드

/* store.tsx */

import { commmunityContentReducer }  from '../modules/community'; // 커뮤니티 관련 reducer

const reducers = combineReducers({ 
  commmunityContent: commmunityContentReducer
});

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['commmunityContentReducer'] // 수정전
  // blacklist: ['commmunityContent'] // persist를 제외하고 싶은 부분 : 수정 후
}

저는 blacklist에 reducer를 추가할 때 모듈로 가져온 reducer 이름으로 추가를 했습니다.
하지만 이렇게 하면 blacklist가 적용되지 않습니다!!

🧐 해결한 코드

/* store.tsx */

import { commmunityContentReducer }  from '../modules/community'; // 커뮤니티 관련 reducer

const reducers = combineReducers({ 
  commmunityContent: commmunityContentReducer
});

const persistConfig = {
  key: 'root',
  storage,
  // blacklist: ['commmunityContentReducer'] // 수정전
  blacklist: ['commmunityContent'] // 수정 후
}

blacklist에 reducer를 추가할 때 모듈로 가져온 reducer 이름으로 추가하는 대신,
cobineReducer에 추가한 객체의 key값을 이름으로 가져왔습니다!
 

←새로고침 전 코드 / 새로고침 후 코드 →

해결 완료 !!!! ^_^