[Redux] redux-persist (새로고침해도 데이터값 그대로 유지할 때)-장바구니 개수유지

https://www.npmjs.com/package/redux-persist

redux-persist

1. 터미널에 사이트를 참고하여 작성해 설치한다.

 

npm install redux-persist

 

 

2. 사이트를 참고하여 코드를 작성

(내 파일 src>store>index.js)

import { configureStore, combineReducers } from "@reduxjs/toolkit"; //combineReducers:여러 리듀서를 묶어서 사용할 수 있게함
import cartSlice from "./cart/cartSlice.js";
import storage from "redux-persist/lib/storage"; //로컬스토리지
//import storageSession from "redux-persist/lib/storage/session"; //세션스토리지
import { persistReducer } from "redux-persist"; //리듀서가 실행될 때 persist를 같이 사용하게 묶어서 사용

const persistConfig = {
  key: "root", //localStorage에 저장될 때의 key값
  storage,
};

const rootReducer = combineReducers({
  cart: cartSlice,
  //user: userSlice
});

const persistedReducer = persistReducer(persistConfig, rootReducer);
//rootReducer와 persist를 묶어서 사용
//redux-persist를 사용해서 로컬스토리지에 state저장하면 페이지가 새로고침 되어도 initialState 값이
//로컬스토리지에 저장된 state값으로 대체되기 때문에 초기화되지 않는다.

//크롬 콘솔에 에러 뜨는 거 해결(https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)
const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, //직렬화 안하겠다 설정
    }),
});

export default store;

 

(내파일 src>index.js)

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

let persistor = persistStore(store);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

3. 크롬 검사에서 확인하는 법

 

4. 크롬 검사 콘솔에 에러 뜨는 거 해결

A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_0__.REGISTER,
      key: key
    });
  }

 

해결방법: 사이트에 검색해서 해결방법 참고해 작성

https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data

Usage Guide | Redux Toolkit

configureStore({
  //...
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore these action types
        ignoredActions: ['your/action/type'],
        // Ignore these field paths in all actions
        ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
        // Ignore these paths in the state
        ignoredPaths: ['items.dates'],
      },
    }),
})

위에꺼 참고해서 작성한것 위에 코드 첨부한거 확인 (내 파일 src>store>index.js)

 

이렇게 하면 장바구니 담긴 개수가 새로고침해도 그래도 유지됨