[Next.js@13] Next + RTK 적용중 오류...Prefer to use the callback notation for the middleware option in configureStore to access a pre-typed getDefaultMiddleware instead.

[Next.js@13] Next + RTK 적용중 오류...

Prefer to use the callback notation for the middleware option in configureStore to access a pre-typed getDefaultMiddleware instead.

 

기본 미들웨어를 불러오는 getDefaultMiddleware 함수가 더 이상 사용되지 않고, 콜백으로 대체되었다고 한다.

오래전에 PR된 내용이었다. 이전의 코드는 아래와 같이 getDefaultMiddleware을 import하여 사용했다.

// store.ts
import {
  configureStore,
  AnyAction,
  Reducer,
  getDefaultMiddleware
} from '@reduxjs/toolkit';

// ### store 생성 함수
const makeStore = () => {

  // 미들웨어 추가
  const middleware = getDefaultMiddleware();
  if (process.env.NODE_ENV === 'development') { // 개발환경에서 logger 미들웨어 추가
    middleware.push(logger);
  }

  // store 생성
  const store = configureStore({
    reducer: rootReducer as Reducer<ReducerStates, AnyAction>,
    middleware, // 미들웨어
  });

  // store 반환
  return store;
};

 

현재 사용법은 아래와 같다.

더 이상 getDefaultMiddleware을 import할 필요 없으며

configureStore의 두번째 인자로 middleware의 인자에 들어있다.

RTK 문서에 따르면 middleware를 사용할 때 구조분해할당보다는 concat이나 prepend를 추천한다고한다.

// store.ts
import {
  configureStore,
  AnyAction,
  Reducer,
} from '@reduxjs/toolkit';

const makeStore = () => {
  const store = configureStore({
    reducer: rootReducer as Reducer<ReducerStates, AnyAction>,
    middleware: (getDefaultMiddleware) => {
      if (process.env.NODE_ENV === 'development') {
      	// return [...getDefaultMiddleware,logger] // 비추천
        return getDefaultMiddleware().concat(logger); // 개발환경에서 logger 미들웨어 추가
      } else {
        return getDefaultMiddleware();
      }
    },
    devTools: process.env.NODE_ENV === 'development', // 개발자도구
  });
  return store;
};

 

 

 

 

 

 

https://github.com/reduxjs/redux-toolkit/pull/1258

🗑 📝 Deprecate getDefaultMiddleware export by Shrugsy · Pull Request #1258 · reduxjs/redux-toolkit

 

https://stackoverflow.com/questions/68479631/getting-warning-message-getdefaultmiddleware-is-deprecated