[Redux-persist] 새로고침해도 store값이 남아있게 도와주는 redux-persist (with redux-toolkit)

jwt토큰을 redux를 사용해서 store에 저장하였더니 새로고침을 하면 store에 저장된 모든 값이 사라진다는 문제점이 있었다.
그래서 제목과 같이 새로고침해도 store값이 남아있게 도와주는 redux-persist를 사용하게됐다.

redux-toolkit과 함께 사용했기때문에, src/reducers/store.js에서 redux-persist를 import하여 적용하였다.

src/reducers/store.js

import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
    key: 'root',
    storage,
};

const persistedReducer = persistReducer(persistConfig, userReducer);

export default configureStore({
    reducer: {
        user: persistedReducer,
        post: postReducer
    }
})

여기서 storage는 값을 저장할 storage로 local storage와 session storage가 있다.

• local storage에 저장할 경우

  import storage from 'redux-persist/lib/storage

• session storage에 저장할 경우

  import storageSession from 'redux-persist/lib/storage/session

  경우에 맞게 import하면 된다!

두 경우 다 새로고침을 해도 저장한 값이 사라지지 않지만 local storage의 경우는 브라우저를 껐다 켜도 값이 남아있게된다.

persistReducer를 생성할 때 사용할 reducer를 인수를 넣어줘야해서, userReducer를 인수로 전해줬다.

src/index.js

import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import store from './reducers/store';

const persistor = persistStore(store);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <App/>
            </PersistGate>
        </Provider>
    </React.StrictMode>
);

store를 전달해서 persistStore를 생성하였다.
Provider안에 persist를 적용할 컴포넌트를 감싸줬다.

끝!