redux-persist로 Redux 상태 유지하기

RTK Query로 로그인 API 구현하고 RTK로 유저 정보 관리하기

↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑

로그인을 성공하면 access token으로 유저 정보를 받아와서 Redux에 저장하는 것까지 구현했다.

이걸로 이제 유저 정보를 회원정보 수정 페이지에서 불러오려고 했으나...
새로고침 및 페이지 이동이 이루어지자 Redux가 깔끔하게 비워졌다.

 

redux-persist

알고보니 원래 그렇다는 것!

redux-persist 라이브러리를 사용하면, Redux 상태를 로컬 스토리지나 세션 스토리지에 저장하고,
애플리케이션을 새로고침해도 상태를 유지할 수 있도록 도와준다!

 

redux-persist 주요 흐름

1. redux-persist 설정
- 저장소(storage)와 저장할 상태(slice) 설정

2. persistReducer로 상태 감싸기

3. persistStore로 Redux Store와 연결

4. PersistGate를 사용하여 UI 렌더링 대기
- 저장된 상태가 복원될 때까지 UI 렌더링 대기!

---

우선 redux-persist 설정을 먼저 해보자.

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage를 사용
import userReducer from './userSlice';

const persistConfig = {
  key: 'user', // 스토리지에 저장될 key
  storage, // localStorage를 사용
};

// userReducer를 래핑!!
const persistedUserReducer = persistReducer(persistConfig, userReducer);

export { persistedUserReducer };

redux-persist를 통해 유저 데이터는 로컬 스토리지에 'user'라는 키로 저장될 것이다.
userReducer는 전에 만들어놓았던 Redux에 유저 정보를 저장하는 리듀서이다.

 

그리고 persistStore로 Redux Store와 연결해주는 과정이 필요하다.

// redux-persist 사용 전
user: userReducer

// redux-persist 사용 후
user: persistedUserReducer

 

그 다음으로 PersistGate 설정이 필요!
원래는 layout.tsx에 바로 연결을 해주려고 했다.


근데

TypeError: Super expression must either be null or a function

이런 에러가 뜨는거..?

알아보니 PersistGate는 클라이언트 컴포넌트에서만 동작할 수 있다고 했다.
'use client'를 통해 클라이언트 컴포넌트로 지정한 <ClientProvider>로 감싸줘도 같은 오류가 났다.

'use client'; // 클라이언트 컴포넌트로 지정

import { PersistGate } from 'redux-persist/integration/react';
import { persistor } from '@/store/store';
import ClientProvider from '@/app/ClientProvider';

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ClientProvider>
      <PersistGate loading={null} persistor={persistor}>
        {children}
      </PersistGate>
    </ClientProvider>
  );
}

그래서 <ClientProvider>와 <PersistGate>를 따로 Providers.tsx로 빼주었다.

그런 다음에 <Providers>로 감싸주니까 잘 되더라...
응.. 잘되면 됐지 뭐...

<Providers>
  <Header />
  <main className="flex justify-center w-full mt-16 md:mt-20">{children}</main>
</Providers>

 

이렇게 하면 Redux의 상태가 로컬 스토리지에 저장되어 유지된다!

Redux dev tool로 확인해봐도 새로고침 후에 더이상 상태가 사라지지 않는다~~