Redux Toolkit (RTK) middleware 적용

리덕스에 상태값 넘김과 동시에 로컬스토리지 데이터도 갱신되어야 하는 이슈가 있었다.
매번 동일 소스를 처리하다보니 너무 소스코드가 지저분해지기도 하고 로컬스토리지 처리 로직이 바뀐다면 여러곳을 확인해야 하는 불편함이 있어
미들웨어를 적용해 보기로 하였다.

createListenerMiddleware 를 사용해 미들웨어를 생성 하고,
startListening 으로 리덕스 실행 후 처리를 지정 하고 prepend로 연결해 주었다.
공식문서 : https://redux-toolkit.js.org/api/createListenerMiddleware

index.js

import { configureStore, combineReducers, createListenerMiddleware } from "@reduxjs/toolkit";
import { saveLocalStorage } from "./middleware/saveStorage";

import info from "./info";
import alert from "./alert";

const reducer = combineReducers({
  info,
  alert,
});

// 미들웨어 처리 
const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
  predicate: saveLocalStorage,
  effect: () => {},
});

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddleware.middleware),
});

export default store;

saveStorage.js

export const saveLocalStorage = (action, currentState, previousState) => {
  if (action.type.startsWith("info/")) {
    localStorage.setItem("headerData", JSON.stringify(currentState.info));
  }
};

4개의 파일에서 반복적으로 처리 되던 불필요한 중복코드를 싹 없애고 하나의 처리로 관리 할 수 있게 되었다~~!