티스토리 뷰
준비하기
Redux 를 사용하고 있는데, 새로고침을 하게 되면 데이터가 다 날아가는 것을 볼 수 있다.
이를 유지하기 위한 방법으로 redux-persist 가 있는데, 이를 사용하는 방법을 알아보자.
우선 아래와 같이 준비를 해주자.
해당 로직은 redux-toolkit 을 이용한 셋팅이다. combineReducers 까지 사용해서 여러 리듀서를 묶은 것을 확인할 수 있다.
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";
import countReducer from "./countSlice";
// combineReducers 로 리듀서를 묶을 수 있음.
const reducers = combineReducers({
cartReducer,
countReducer,
});
export default configureStore({
reducer: reducers,
});
redux-persist
리덕스의 store 는 페이지를 새로고침 할 경우, state 가 날아갑니다. 이것에 대한 대응 방식으로 localStroage, sessionStorage 에 저장합니다.
yarn add redux-persist
저장하는 방법으로는 localStorage, sessionStorage 가 있음.
// localStorage
import storage from 'redux-persist/lib/storage
// sessionStorage
import storageSession from 'redux-persist/lib/storage/session'
셋팅하기
자, 이제 위에 준비가 되었으면 아래와 같이 코드를 입혀줍니다.
store.js 로 가서 셋팅해줍니다. localStorage 에 countReducer 만 셋팅되도록 입력해줍니다.
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import cartReducer from "./cartSlice";
import countReducer from "./countSlice";
const persistConfig = {
key: "root",
// localStorage
storage,
// countReducer 만 local 에 저장한다.
whitelist: ["countReducer"],
};
// combineReducers 로 리듀서를 묶을 수 있음.
const reducers = combineReducers({
cartReducer,
countReducer,
});
// persistReducer 적용
const persistedReducer = persistReducer(persistConfig, reducers);
// store 생성
// 에러 처리용 middleware 설정해줍시다. redux 에서 값을 주고 받을 때 object 형태의 값을 string 으로 변환하는데 이 상황에서 변환이 불가능한 값을 전달받은 에러 발생
export default configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
});
메인에다가 redux-persist 를 써서 로컬스토리지에 저장하겠다라고 셋팅해줍시다.
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import { Provider } from "react-redux";
import store from "./store/store.js";
import { persistStore } from "redux-persist"; // persistStore 설정
import { PersistGate } from "redux-persist/integration/react"; // PersistGate 설정
const persistor = persistStore(store);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<BrowserRouter>
<App />
</BrowserRouter>
</PersistGate>
</Provider>
</React.StrictMode>
);
자 이제 실행해보면 아래와 같이 로컬스토리지에 등록되어있으면 완료 입니다. 만약에 나는 브라우저가 꺼지면 날리고 싶다하면 sessionStorage 로 변경해서 사용하시면 됩니다.
'개발.. > React' 카테고리의 다른 글
리액트에서 styled components 를 사용해서 컴포넌트 만들기 (0) | 2024.04.09 |
---|---|
Vite 기반의 React 빌드시 경로 변경 방법 (0) | 2024.03.26 |
React - PropTypes 사용 (0) | 2023.09.23 |
redux-toolkit 간단한 사용 방법 (0) | 2023.09.18 |
useState 동작 방식 (0) | 2023.09.15 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 깃허브
- vue router
- cors
- github
- dockerfile
- nextjs14
- React
- 오블완
- openAI
- seo
- nextjs13
- Vite
- Git
- vscode
- NUXT
- vue composition api
- ChatGPT
- 네이버 서치 어드바이저
- nuxt2
- 서버 to 서버
- 스벨트
- NextJS
- Zustand
- nodejs
- AWS
- 타입스크립트
- svelte
- nextjs15
- 티스토리챌린지
- Github Actions
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함