새로운 이슈 확인 : serializable

javascript에서 사용하는 데이터 타입은 주로 object 이다. javascript 에서야 object 라는 데이터 타입을 쓸 수 있지만 다른 언어나 환경에서도 사용이 가능한가? 좋은 예시로 localStorage 가 있다. localStroge 는 string 값만 들어갈 수 있기 때문에 만약 넣는 값이 다르다면 해당 데이터 타입을 string 으로 변화하는 작업이 필요하다 이를 serialization (직렬화) 라고 한다. 반대로 localStrage의 string 값을 다시 object로 변환하는 작업을 deserialization (역직렬화) 라고 한다.

리덕스는 일반적으로 non-serializable 타입은 저장하지 않기를 권장한다. 해보면 되기는 하지만, store 의 일관성 유지, 복원 기능, 디버깅에서 방해를 받을 수 있기 때문이다. 이는 redux 가 데이터 변화 감지 비교 할 때 shallow-equalty 를 기준으로 작업을 수행하기 때문에, 에러를 동반하는 비동기 값이나, 값이 상황에 따라 변화할 수 있는 데이터 값을 저장했다가는 모든 데이터를 다 덮어 쓰기 때문에 꺼려하는 것이다.

참고로 서비스를 운영하는데 non-serializable 타입 데이터를 꼭 store 에 저장해서 공유해야한다면, redux 설정에서 미들웨어 설정 시, serializableCheck 를 false 로 설정하면 된다.

import { combineReducers, configureStore } from '@reduxjs/toolkit'

import authSlice from './auth-slice'
import userSlice from './user-slice'
import languageSlice from './language-slice'
import tipSlice from './tip-slice'
import questionSlice from './question-slice'

import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import roomSlice from './room-slice'
import ovSlice from './ov-slice'
import hearthistorySlice from './hearthistory-slice'
import peerUserSlice from './peerUser-slice'

const persistConfig = {
  key: 'root',
  blacklist: ['openvidu', 'room', 'openvidu', 'peerUser'],
  storage,
}

const persistingReducer = combineReducers({
  user: userSlice.reducer,
  auth: authSlice.reducer,
  language: languageSlice.reducer,
  room: roomSlice.reducer,
  openvidu: ovSlice.reducer,
  tip: tipSlice.reducer,
  question: questionSlice.reducer,
  heart: hearthistorySlice.reducer,
  peerUser: peerUserSlice.reducer,
})

// const normalReducer = combineReducers({})

const persistedReducer = persistReducer(persistConfig, persistingReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
      // serializableCheck: {
      // ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      // ovActions: false,
      // },
    }),
})

export const persistor = persistStore(store)
export default store

ymc의 기술블로그 : 리덕스와 serializable
https://ymc-crow.github.io/basic/redux%EC%99%80-serializable/
velopert : 리덕스 왜 쓸까?
https://velopert.com/3533