Redux-persist 의 치명적인 단점

React-Native로 개발하다보면 Redux를 사용하게 되고
Redux를 사용하다보면 Redux-persist를 사용하게 된다.

이때 Store로 AsyncStorage를 보통 사용하게 되는데, 이는 Android에서는 6MB의 제한된 저장공간을 가지게 된다.
따라서 Redux에 모든 데이터를 넣다가 6MB를 넘게되면 Android에서는 예상하지 못한 문제를 만날 가능성이 있다.
6MB의 한계를 키우는 방법도 존재하지만, 만약 Expo를 사용한다면 해당 설정을 내리는 것이 난감한 선택지가 되므로, 이는 일반적인 해결책이라 하기 어렵다.

양이 큰 데이터는 Redux보다 File 형태로 저장하거나, 네트워크를 이용해 잠시 사용하는 방법이 좋다.

그러나 아래와 같은 경우가 존재할 수 도 있다.

• Redux에 큰 데이터를 넣어야 하는 경우
• 시간에 따라 증가하는 데이터가 6MB를 넘을 수 있는 경우
• 사이즈와 무관하게 영속화하고 싶지 않은 정보가 redux에 들어갈 경우

이 때 아래와 같이 redux-persist 의 blacklist 속성 값을 이용하면 저장하지 않을 key값을 명시할 수 있어, 원하는 데이터를 영속화시키지 않을 수 있다.

예시

아래와 같이 MySlice 가 있고, 저장하고 싶지 않은 값 shouldNotSave 가 포함되어 있다고 가정하자.

const MySlice = createSlice({
  name: "mystate",
  initialState: {
    user: [],
    shouldNotSave: [],
  },
  reducers: {
    addUser: (state) => {
      ...
    }
  }
})
export const { actions, reducer } = MySlice;
export default MySlice;

이 때 backlist를 이용해 특정 값을 저장되지 않도록 하는 설정은 다음과 같다.

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  blacklist: ["mystate"],
};

const mystatePersistConfig = {
  key: "mystate",
  storage: AsyncStorage,
  blacklist: ["shouldNotSave"],
};

const mystateReducer = combineReducers({
  mystate: persistReducer(mystatePersistConfig, MySlice.reducer),
});

const rootReducer = persistReducer(persistConfig, mystateReducer);

const store = createStore(
  rootReducer,
);
const persistor = persistStore(store);

export { store, persistor };

결과

이렇게 설정한 이후 Reducer 안에서 console.log(Object.keys(state)) 를 호출해보면 shouldNotSave 키값이 보이는데,
이는 키값만 존재할 뿐, 그 내용을 찍어보면 비어있다.

참고

• https://github.com/rt2zz/redux-persist#nested-persists
• https://stackoverflow.com/questions/46782409/redux-persist-blacklist-not-working