2024. 7. 2. 리덕스 툴킷 (Redux Toolkit)

리덕스 툴킷(Redux Toolkit)

은 리덕스(Redux) 상태 관리를 간편하고 효율적으로 만들기 위해 공식적으로 제공되는 패키지이다. 기존의 리덕스는 설정 과정이 복잡하고, 보일러플레이트 코드가 많아서 초기 학습 곡선이 가파르다는 단점이 있다. 리덕스 툴킷은 이러한 문제를 해결하고자 등장하였다.

---

간편한 설정

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducer';

const store = configureStore({
  reducer: rootReducer,
});

리덕스 툴킷은 configureStore 함수를 제공하여 스토어 설정을 간소화한다. 이 함수는 미들웨어 설정, 리듀서 결합, 디버깅 도구 통합 등을 자동으로 처리해준다.

---

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;

createSlice는 액션 생성자와 리듀서를 함께 정의할 수 있게 해준다. 이 함수는 리덕스에서 일반적으로 많이 작성해야 하는 보일러플레이트 코드를 크게 줄여준다.

---

createAsyncThunk

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import api from './api';

export const fetchData = createAsyncThunk('data/fetchData', async () => {
  const response = await api.getData();
  return response.data;
});

const dataSlice = createSlice({
  name: 'data',
  initialState: { data: [], status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default dataSlice.reducer;

비동기 액션을 생성할 때, createAsyncThunk를 사용하면 보다 간편하게 비동기 로직을 관리할 수 있다. 이 함수는 pending, fulfilled, rejected 상태를 자동으로 처리해준다.

---

Immer 통합

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

리덕스 툴킷은 Immer 라이브러리를 통합하여, 불변성을 유지하면서도 더 간단한 문법으로 상태를 업데이트할 수 있게 해준다. 개발자는 기존의 상태를 직접 수정하는 것처럼 보이는 코드를 작성할 수 있다.

---

DevTools

리덕스 툴킷은 리덕스 데브툴즈(Redux DevTools)와의 통합을 기본적으로 지원하여, 개발자가 상태 변화를 쉽게 추적하고 디버깅할 수 있도록 돕는다. configureStore를 사용할 때 별도의 설정 없이도 DevTools가 자동으로 활성화된다.

---

장점

간편한 설정: 복잡한 설정 과정을 자동화하여 개발자가 비즈니스 로직에 집중할 수 있게 해준다.

 

코드 간소화: 보일러플레이트 코드를 크게 줄여주어 가독성을 높이고 유지보수를 용이하게 한다.

 

비동기 로직 관리: createAsyncThunk를 통해 비동기 액션을 관리하기 쉽다.

 

불변성 유지: Immer 통합으로 불변성을 유지하면서도 간단한 상태 업데이트가 가능하다.

 

디버깅 용이: DevTools와의 원활한 통합으로 상태 변화를 쉽게 추적하고 디버깅할 수 있다.

---

단점

추상화의 증가: 편리함을 제공하지만, 내부적으로 어떤 일이 일어나는지 이해하는 것이 어려울 수 있다.

 

의존성 증가: 리덕스 툴킷에 대한 의존성이 높아지면, 특정 상황에서 유연성이 떨어질 수 있다.

 

---

리덕스 툴킷은 리덕스 상태 관리를 단순화하고 개발 생산성을 높이기 위한 강력한 도구이다. 간편한 설정, 보일러플레이트 코드 감소, 비동기 로직 관리, 불변성 유지, 디버깅 지원 등 다양한 장점을 제공하며, 이를 통해 개발자는 보다 효율적으로 애플리케이션을 개발할 수 있다