#TIL 39일차(RTK)

---

RTK

Redux를 더 쉽게 사용하고자 하는 목표로 만들어진 Redux의 공식 도구 모음

⭐️ Redux의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되고, Ducks 패턴의 요소들이 어느정도 자동화 된 것 → 즉 새로운 것이 아님!!

Redux와 RTK 차이

이제 Redux로 작성된 코드와 RTK로 작성된 코드를 비교해보자

Redux 예시코드

// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload,
  };
};

// Initial State
const initialState = {
  number: 0,
};

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };

    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

// export default reducer
export default counter;

RTK 예시코드

// src/redux/slices/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

이렇게 비교해보면 Redux로만 코드를 작성했을 때보다 코드의 양이 확실히 줄어든 것을 확인할 수 있다. 어떤 차이가 있는 것일까 🤔?

⭐️ 가장 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer 가 하나로 합쳐졌다는 것이다.

이제 RTK 사용 방법을 정리하며 예시 코드를 확인해보자

RTK 사용 방법

📍 패키지 설치

yarn add react-redux @reduxjs/toolkit

📍 configStore 설정

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './todosSlice';

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

export default store;

    → 만약 모듈(Slice)이 여러 개인 경우

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './todosSlice';

const store = configureStore({
  reducer: { 
    count: countReducer, todo: todoReducer
  },
});

📍 createSlice 사용

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

const initialState = {
  todos: [],
};

const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {},
});

export const {} = todosSlice.actions;
export default todosSlice.reducer;

📍 컴포넌트에서 사용

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

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

최상위의 index.js Provider에 주입해주는 것은 바뀐 것 없이 동일하다

RTK 장점

위처럼 RTK를 사용해 코드를 작성하면 다음과 같은 장점들이 있다

• 간편한 설정
  • configureStore를 통해 스토어 설정이 간단해진다.
• 모듈화된 코드
  • createSlice를 통해 액션과 리듀서를 한 곳에 모아 코드를 모듈화할 수 있다.
• 유지 보수성
  • 코드가 간결하고 구조화되어 유지 보수가 용이하다.