🚨Redux-Persist 라이브러리 사용해서 로그인 토큰 영구저장하기
1. 문제 상황
프로젝트에서 로그인 후 토큰과 로그인 유형을 리덕스에 저장했는데 새로고침을 하면 초기화가 되어 다시 로그인을 해야 했다.
2. 해결 방법
찾아보니 리덕스 스토어에 데이터를 영구적으로 저장할 수 있는 Redux-Persist 라이브러리를 사용했다.
persist는 지속하다, 영속하다 라는 뜻이다. 데이터를 영구적으로 저장할 수 있도록 하는 것이다.
이것이 가능한 이유는 Redux-Persist 라이브러리가 LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주기 때문이다.
이중 LocalStorage는 데이터를 영구적으로 저장하기 때문에 이곳에 저장하게 만들어주면 리덕스 slice를 영구적으로 저장할 수 있다.
persist-redux는 어렵지 않다. 우선 프로젝트에서 persist-reducer로 만들고 싶은 리듀서를 일반 리듀서와 똑같이 만들어주고 저장한다.
새로고침 후에도 계속 저장해야 하는 데이터는 토큰과 로그인의 유형을 저장하는 slice 두가지였다. 해당 값을 만들어주고 store로 이동한다.
store에서 원래는 slice의 reducer 를 바로 등록하지만, 해당 slice는 세가지 단계를 거쳐야 한다.
1) redux-persist 설치
npm install redux-persist
2) persist 화 하고자 하는 리듀서들을 하나로 합쳐준다.
합쳐주기 위해 필요한 combineReducers 함수를 불러와줘야 한다.
import { combineReducers } from '@reduxjs/toolkit';
그리고 이렇게 combineReducers함수를 호출하면서 slice들을 객체 형식으로 넣어주면 된다.
여기서 token과 login_type이라고 작성한 key는 스토리지에서 key로 들어가게 되기 때문에 명시적인 이름으로 넣어주면 된다.
value는 원래 store에 등록할 때처럼 slice이름.reducer 로 넣어주면 된다.
3) 새로운 Persist 객체를 만들어 Persist화 해준다.
이 작업을 위해서는 어디에 slice를 저장할 것인지 명시해줘야 하기 때문에 웹의 localStorage를 불러온다. 이것은 라이브러리 내에서 storage로 불러올 수 있다.
import { persistReducer } from 'redux-persist';import storage from 'redux-persist/lib/storage';
- persisConfig = {} : 새로운 persist 선언
- key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지,
- storage : 웹의 localStorage
따라서 이렇게 저장하면 리듀서의 root 지점부터 저장하며, 웹의 로컬스토리지에 저장하겠다는 의미이다.
만든 새로운 persist 객체를 persistReducer 함수를 사용해서 persist 리듀서로 만들어준다.
4) store에 persistReducer 등록
일반 리듀서 등록하는 곳에 등록해준다. 다만 persistedReducer는 아까 각각 key를 등록했기 때문에 여기서는 key를 안써도 된다.
이렇게 하면 새로고침 후에도 토큰과 로그인 타입이 계속 로컬스토리지에 남아있게 된다.
