오늘날 대부분의 웹 애플리케이션은 복잡한 상태 관리를 필요로 합니다. Redux는 이를 해결하기 위한 강력한 상태 관리 라이브러리입니다. 그 중에서도 Redux Toolkit은 Redux를 더욱 쉽고 효율적으로 사용할 수 있도록 도와주는 도구 모음입니다. 이번 기사에서는 Redux Toolkit을 활용하여 애플리케이션의 배치 처리를 어떻게 할 수 있는지 알아보겠습니다.

배치 처리란?

배치 처리는 여러 개의 Redux 액션을 한 번에 실행하는 과정을 의미합니다. 이를 통해 여러 액션을 단일 작업으로 묶어서 처리할 수 있으며, 상태 변화가 필요한 경우에만 UI가 업데이트되는 효과를 얻을 수 있습니다.

Redux Toolkit의 createSlice를 사용한 액션 정의

먼저 Redux Toolkit을 사용하여 액션을 정의해야 합니다. createSlice 함수는 간편한 문법을 제공하여 액션과 리듀서를 한 번에 정의할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

위의 코드에서는 increment와 decrement라는 두 개의 액션을 정의하였습니다. 이제 Redux Toolkit을 활용하여 배치 처리를 구현해보겠습니다.

Redux Toolkit의 configureStore를 사용한 배치 처리

Redux Toolkit은 configureStore 함수를 제공하여 Store를 생성할 때 배치 처리를 설정할 수 있습니다. 배치 처리 기능을 활성화하면 단일 액션으로 여러 개의 리듀서를 한 번에 실행할 수 있습니다. 다음은 배치 처리를 설정하는 예제입니다:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    serializableCheck: false,  // 배치 처리 시 직렬화 오류 방지
  }),
});

위의 코드에서는 configureStore 함수를 사용하여 Store를 생성하고, middleware를 설정하는 부분에서 serializableCheck를 false로 설정하여 배치 처리 시 직렬화 오류를 방지하였습니다.

애플리케이션에서 배치 처리 사용하기

이제 애플리케이션에서 배치 처리를 사용하여 여러 액션을 한 번에 실행할 수 있습니다. 예를 들어, increment와 decrement 액션을 배치 처리하는 코드는 다음과 같습니다:

import { useDispatch } from 'react-redux';
import { batch } from 'react-redux';
import { increment, decrement } from './counterSlice';

const MyComponent = () => {
  const dispatch = useDispatch();

  const handleBatchActions = () => {
    batch(() => {
      dispatch(increment());
      dispatch(decrement());
    });
  };

  return (
    <button onClick={handleBatchActions}>Batch Actions</button>
  );
};

💡 #JavaScript #ReduxToolkit