#17 Redux Toolkit

https://redux-toolkit.js.org/

Redux Toolkit | Redux Toolkit

1. Redux Toolkit이란?

Redux Toolkit(RTK)은 Redux의 공식 권장 도구로, Redux를 더 쉽고 효율적으로 사용할 수 있도록 도와줍니다.
Redux의 기존 단점을 개선하여 보일러플레이트 코드 감소, 비동기 로직 간소화, 더 나은 개발자 경험을 제공합니다.

주요 특징

• configureStore() : Redux 스토어 설정을 단순화
• createSlice() : 액션과 리듀서를 함께 정의 가능
• createAsyncThunk() : 비동기 작업 처리 간소화
• Immer 내장 : 상태 변경을 더 직관적으로 처리

 

2. Redux Toolkit 설치

Redux Toolkit과 React-Redux를 함께 설치합니다.

npm install @reduxjs/toolkit react-redux

 

 

3. 기본 사용법

1) createSlice()를 사용한 리듀서 정의

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

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

// 액션과 리듀서 내보내기
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

 

위 코드에서 state.value += 1; 처럼 직접 상태를 변경할 수 있는 것은 Immer가 내장되어 있기 때문입니다.

Redux에서 Immer는 불변 상태를 편리하게 작업할 수 있는 라이브러리로, Redux의 상태를 업데이트하는 데 사용됩니다. 

Immer의 특징 
- 전용 API나 데이터 구조를 배우지 않아도 됩니다일반 JavaScript 데이터 구조(객체, 배열 등)를 사용합니다
- 보일러 플레이트 감소코드가 간결해집니다 JSON 패치 지원

Immer의 사용법 
- 개발자가 draft를 업데이트하면, Immer에서 이러한 변경 사항을 추적하여 새로운 state를 만듭니다
- 이 새로운 state는 store에 반영됩니다

Redux에서 Immer 사용 이유
- 구조가 복잡해지게 되면 불변성을 유지하며 업데이트할 수 있습니다 
- RTK 이전부터 Redux에서 사용하는 것이 권장되어 왔습니다 

Redux의 장점 
- 순수 함수를 사용해 상태를 예측 가능하게 만듭니다
- 유지보수에 용이합니다
- redux dev tool이 있어 디버깅에 유리합니다
- 비동기를 지원하는 Redux Saga, Redux Thunk 등 다양한 미들웨어가 존재합니다

2) configureStore()를 사용한 스토어 설정

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

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

export default store;

3) React에서 Provider 설정

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

4) React 컴포넌트에서 Redux 상태 사용

Redux의 상태를 읽거나 액션을 실행하려면 useSelector와 useDispatch를 사용합니다.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementByAmount } from "./counterSlice";

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
};

export default Counter;

 

 

4. 비동기 작업 처리 (createAsyncThunk)

Redux Toolkit에서는 createAsyncThunk를 사용하여 비동기 API 호출을 간편하게 처리할 수 있습니다.

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

// 비동기 액션 생성
export const fetchUser = createAsyncThunk("user/fetchUser", async (userId) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return await response.json();
});

const userSlice = createSlice({
  name: "user",
  initialState: { data: null, status: "idle" },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state) => {
        state.status = "failed";
      });
  }
});

export default userSlice.reducer;

 

 

5. Redux DevTools 지원

Redux Toolkit은 기본적으로 Redux DevTools를 지원하여, 개발 중 상태 변화를 쉽게 확인할 수 있습니다.

 

결론

Redux Toolkit을 사용하면 기존 Redux보다 훨씬 적은 코드로 상태 관리를 효율적으로 처리할 수 있습니다.

• createSlice()를 사용해 리듀서를 쉽게 정의
• configureStore()로 간편하게 스토어 설정
• createAsyncThunk()로 비동기 작업을 쉽게 관리

이제 Redux를 더 간단하고 강력하게 사용할 수 있습니다!