Redux Toolkit

핵심 개념

Slice

특정 기능 영역의 상태와 리듀서를 하나로 묶은 단위입니다. createSlice 함수로 만들며, 액션 생성자와 리듀서를 자동으로 생성해줍니다.

configureStore

Redux 스토어를 생성하는 함수로, 개발자 도구와 미들웨어를 기본으로 포함하여 별도 설정 없이 바로 사용할 수 있습니다.

createAsyncThunk

비동기 작업(API 호출 등)을 처리하는 thunk를 만드는 함수입니다. pending, fulfilled, rejected 액션을 자동으로 생성합니다.

Immer

Redux Toolkit에 내장된 라이브러리로, 리듀서 안에서 불변성을 신경 쓰지 않고 일반 객체처럼 상태를 수정할 수 있게 해줍니다.

RTK Query

서버 데이터 fetching과 캐싱을 자동화하는 선택적 기능입니다. API 엔드포인트를 정의하면 훅을 자동 생성해줍니다.

간단한 카운터 Slice 생성

createSlice로 상태와 리듀서를 정의하고, configureStore로 스토어를 만드는 가장 기본적인 패턴입니다. 액션 타입과 액션 생성자가 자동으로 만들어집니다.

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

// Slice 생성 - 상태, 리듀서, 액션을 한 번에 정의
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Immer 덕분에 직접 수정 가능
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

// 스토어 생성
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

// 자동 생성된 액션 사용
store.dispatch(counterSlice.actions.increment());