리팩토링 / 부산에 가면 5. Redux-persist

Redux-persist를 사용하기 전에는 직접 localState에 값을 저장, 조회, 삭제했다.
store.js

//authReducer.js
//Redux-persist 사용 전
import {createSlice} from "@reduxjs/toolkit"
const initialToken = localStorage.getItem('token');

let initialState = {
    token: initialToken,
    isLoggedIn : !!initialToken,
    email : null
}
export const authSlice = createSlice({
    name:'auth',
    initialState,
    reducers:{
        login:(state, action) => {
            state.token = action.payload.idToken
            localStorage.setItem('token',action.payload.idToken)
            localStorage.setItem('expirationTime',action.payload.expirationTime)
            state.isLoggedIn = !!action.payload.idToken
            state.email = action.payload.email
        },
        logout : (state, action) => {
            state.token = null
            state.isLoggedIn = false
            state.email = null
            localStorage.removeItem('token')
            localStorage.removeItem('expirationTime');
        }
    }
})
export const {login, logout, fetchEmail} = authSlice.actions
export default authSlice.reducer

//Redux-persist 사용 후
import {createSlice} from "@reduxjs/toolkit"
let initialState = {
    token: '',
    isLoggedIn : false,
    email : ''
}

export const authSlice = createSlice({
    name:'auth',
    initialState,
    reducers:{
        login:(state, action) => {
            state.token = action.payload.idToken
            state.isLoggedIn = !!action.payload.idToken
            state.email = action.payload.email
        },
        logout : (state, action) => {
            return initialState
        }
        
    }
})

export const {login, logout, fetchEmail} = authSlice.actions
export default authSlice.reducer

그로 인해서 이렇게 하면 되는데 굳이 redux-persist를 사용해야하나 생각이 들었다.

window.localStorage.removeItem('persist:root')
//이렇게 하면 로컬스토리지에서 사라지고
window.localStorage.setItem('persist:root','hello')
//이렇게 하면 persist:root의 값이 바뀌기도 한다.

위의 사항으로 보아 persist:root로 저장하는것에 특별한 기능이 있지는 않은 것 같다.
(예를 들어, 삭제가 안되거나, 다른 방법으로 삭제 및 접근을 못하거나)

그래서 내가 생각해보고 구글링해봤을 대 찾은 redux-persist를 사용했을 때 얻을 수 있는 장점은

불필요한 코드를 줄일 수 있다.
저장을 유지하고 싶은 state에 대해서 추가로 setItem, removeItem해줘야하는 반면,
redux-persist는 코드 몇줄만 추가해주면 기존 코드에서 로컬스토리지에 저장할 state는 localStorage에 그럴 필요없는 state는 평소처럼 사용할 수가 있다.

로컬스토리지에 저장된 값을 없애고 싶을 경우 initialState로 돌아가도록 했다.