1. redux, react-redux, redux-toolkit.

이전까지 redux와 react-redux에 대해 알아보았다. 그런데 redux에는 redux-toolkit이라는 또 다른 개념이 존재한다. 서로 이름이 비슷한 놈들이 왜 이렇게 많은가 싶지만 이들의 차이점을 간단하게 정리하면 다음과 같다.

• Redux
  전역 상태 관리 라이브러리.

• React-Redux
  React.js에서 Redux를 더 편하게 사용할 수 있도록 편의 기능을 제공해주는 라이브러리.

• Redux-toolkit.
  Redux, React-Redux 등을 사용해보면서 불편하다고 지적된 부분을 해결하기 위해서 Redux 개발진에서 새롭게 만든 신규 라이브러리.

Redux-toolkit.

Redux-toolkit에서 추가된 편의 기능을 간단하게 정리해보겠다.

configureStore

Redux Store를 생성하고 필요 설정 등을 세팅할 때, 보다 간단한 구성 및 기본 설정을 제공해 준다. toolkit 이전만 해도 Store에는 미들웨어나 개발자 모드 설정를 위해서 compose 함수, composeWithDevTools 함수, applyMiddleware 함수 등을 적절하게 섞어 사용해주어야 했다.

그런데 toolkit의 configureStore 함수는 객체형 인자를 받아 Reducer, 미들웨어 설정, 개발자 모드 등록 등의 작업을 간편하게 할 수 있도록 지원해준다.

 const firstMiddleware = (store) => (next) => (action) => {
  	console.log('로깅', action);
  	next(action);
};

const enhancer = process.env.NODE_ENV === 'production' ?
  compose(
    applyMiddleware(
      firstMiddleware,
    ),
  )
  :
  composeWithDevTools(
    applyMiddleware(
      firstMiddleware,
    ),
  );

const store = createStore(reducer, initialState, enhancer);

이런 Store쪽의 코드가..

const firstMiddleware = () => (next) => (action) => {
  console.log('로깅', action);
  next(action);
};

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(firstMiddleware),
  devTools: process.env.NODE_ENV !== 'production',
});

이렇게 줄어든다.

createSlice

Reducer와 Action를 대체한다. 기존 Redux와 달리 Reducer와 Action 생성자를 하나로 통합하여 작성할 수 있다. 이로 인해 불변성 유지, 코드 가독성 및 유지보수성 확보 등의 장점을 갖게 된다.

createAsyncThunk

기존 Redux에서 Redux-Thunk 등을 사용하여 수행했던 비동기 작업을 자체적으로 처리할 수 있도록 해준다. 쉽게 말해서 Redux-Thunk 등의 비동기 작업 처리 라이브러리가 내장 되어있는 것이다.

Immer

기존 Redux에서 불변성 유지를 위해 따로 설치해서 사용하던 Immer 라이브러리가 Redux-Thunk 등과 마찬가지로 내장되었다.

2. 간단하게 말하자면..

Redux Toolkit은 Redux 개발을 보다 편리하고 효율적으로 만들기 위한 도구를 제공하는 라이브러리이다.

Redux 사용을 위해 반드시 해야했던 설정 작업 등을 알아서 해주고, 불변성 유지나 비동기 작업 수행에 필요한 라이브러리를 자체적으로 내장하고 있으며, Reducer 및 Action 생성을 하나로 합쳐 개발 편의성을 제공하며, Redux DevTools과 자동 연동되어 디버깅 작업의 용이함을 갖추고, 더 최적화 된 reducer를 통해 App 성능 향상에 도움이 되는 라이브러리이다.