Redux Toolkit (리덕스 툴킷)

 

🟡 Redux Toolkit (RTK)

Redux를 쉽고 효율적으로 사용할 수 있도록 만든 Redux 공식 라이브러리.

 

◼️ 필요 이유

기존 Redux는 상태 하나를 관리하기 위해 Store 설정, Action 생성, Reducer 작성 등을 각각 작성해야해 반복되는 코드가 많고 설정이 복잡했다.

Redux Toolkit은 이러한 과정을 단순화하여 더 적은 코드로 Redux를 사용할 수 있도록 도와준다.

 

◼️ 주요 특징

• 반복 코드(Boilerplate) 감소
  • Action, Reducer, Store 설정 등을 간결하게 작성할 수 있다.
• Store 설정 간소화
  • configureStore()를 통해 Store를 쉽게 생성할 수 있다.
• Action과 Reducer 자동 생성
  • createSlice() 하나로 State, Action, Reducer를 함께 생성한다.
• Redux DevTools 기본 지원
  • 별도의 설정 없이 DevTools를 사용할 수 있다.
• Redux Thunk 기본 포함
  • 비동기 로직을 추가 설정 없이 사용할 수 있다.
• Immer 지원
  
  • State를 직접 수정하는 것처럼 작성해도 불변성이 유지된다.

 

◼️ 주요 기능

🔹 configureStore()

Redux Store를 생성하는 함수로, 여러 개의 Slice를 하나의 Store로 합쳐 관리할 수 있다.

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer,
  },
});

• 하나의 Store에 여러 Slice를 등록하여 전역 상태를 관리한다.

 

🔹 createSlice()

Redux Toolkit에서 가장 핵심적인 API이다.

하나의 함수에서 다음 내용을 모두 생성한다.

• State
• Reducer
• Action

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

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    up(state) {
      state.value++;
    },
    down(state) {
      state.value--;
    },
  },
});

• 생성된 Slice에서는 Action과 Reducer를 자동으로 만들어준다.

export const { up, down } = counterSlice.actions;
export default counterSlice.reducer;

 

◼️ Store와 Slice의 관계

Redux Toolkit에서는 Store 하나에 여러 개의 Slice를 등록하여 관리하는 방식이 일반적이다.

Store
 ├─ counterSlice
 ├─ userSlice
 ├─ productSlice
 └─ cartSlice

• 각 Slice는 하나의 기능이나 상태를 담당하며, configureStore()가 이를 하나의 Store로 관리한다.

 

◼️ Immer 지원

Redux에서는 기존 State를 직접 수정하면 안 된다.

Redux Toolkit은 내부적으로 Immer를 사용하기 때문에 직접 수정하는 것처럼 작성해도 새로운 State를 안전하게 생성한다.

return {
  ...state,
  value: state.value + 1,
};

• 기존 Redux

 

state.value++;

• Redux Toolkit
  • 실제로는 Immer가 새로운 State를 생성해 주므로 Redux의 불변성 규칙은 그대로 유지된다.

 

◼️ React와 함께 사용하는 API

Redux Toolkit은 상태를 관리하고, react-redux는 React와 Redux를 연결한다.

API	역할
Provider	Store를 React에 연결
useSelector()	Store의 State 조회
useDispatch()	Action을 dispatch

 

◼️ Redux와 Redux Toolkit 차이

Redux	Redux Toolkit
설정이 복잡함	설정이 간단함
반복 코드가 많음	반복 코드가 적음
Action을 직접 작성	Action 자동 생성
Reducer를 직접 관리	createSlice로 한 번에 관리
Store 설정이 복잡	configureStore로 간단하게 생성
불변성을 직접 관리	Immer로 자동 관리

 

 

📍 POINT 📍

✔️ Redux Toolkit은 Store 생성, Reducer 작성, Action 생성 등을 간결하게 작성할 수 있으며, Redux 공식 권장 방식이다. ✔️

✔️ 대표적인 API는 configureStore() 와 createSlice() 이다.✔️

 

---

 

🔗 Redux Toolkit 설치 🔗

1️⃣ 프로젝트 생성하면서 Redux Toolkit 같이 설치

npx create-react-app my-app --template redux

 

2️⃣ React 프로젝트를 만든 후 Redux Toolkit과 React-Redux 같이 설치

npm install @reduxjs/toolkit react-redux

 

3️⃣ Redux와 React-Redux 설치 후 Toolkit 만 추가

npm install @reduxjs/toolkit

 

🌟 팁: React 버전이 낮아서 생기는 오류

Redux Toolkit 설치 중 오류가 발생하면 먼저 package.json을 확인할 것.

"react": "^18.1.x",
"react-dom": "^18.1.x"

• 실무에서 오래된 프로젝트를 유지보수할 때 자주 발생하는 문제로  React와 react-dom 버전이 너무 낮으면 호환성 문제로 설치 오류가 발생할 수 있다. 필요하다면 프로젝트 환경에 맞게 React 버전을 업그레이드하면 해결되는 경우가 많다. (항목의 버전이 18.1.x 이상이어야 사용가능하다.)

 

❗ Redux Toolkit을 설치하면 redux는 따로 설치할 필요가 없다. ❗

• Redux Toolkit (@reduxjs/toolkit): Redux 애플리케이션의 로직(액션, 리듀서, 스토어 설정)을 작성하는 데 필요한 도구들의 모음이다. Redux 코어 라이브러리를 포함하고 있으므로 redux 패키지를 따로 설치할 필요가 없다.
• React-Redux (react-redux): React 컴포넌트와 Redux 스토어를 연결하는 데 필요한 역할을 한다. Redux 스토어의 상태를 React 컴포넌트에 주입하고, 컴포넌트에서 액션을 디스패치할 수 있게 해주는 Provider, useSelector, useDispatch 같은 훅들을 제공한다. Redux Toolkit과는 별개의 역할을 수행하는 독립적인 라이브러리이다.

 

---

 

🔗 다이어그램으로 이해하기 🔗

https://velog.io/@sweet_pumpkin/%EB%AC%B4%EC%9E%91%EC%A0%95%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%B5%9C%EA%B3%A0-%EB%A6%AC%EB%8D%95%EC%8A%A4%EC%95%BC-%EA%B3%A0%EB%A7%99%EB%8B%A4-Redux-Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기