React: Redux - 5 RTK

01. RTK (Redux ToolKit)이란

리덕스툴킷의 개념

리덕스 툴킷은 이전에 배운 리덕스를 개량한 것

더 적은 코드, 더 편하게 리덕스를 사용하기 위한 기능들 흡수

기존 리덕스와 다른 점은 모듈 파일 뿐

02. 일반 리덕스와 코드 비교

툴킷 설치

터미널

yarn add @reduxjs/toolkit

 

redux 폴더에 하위 폴더 slices 생성

counter 프로그램 코드 비교

기존의 코드에서는 modules 폴더 내부의 counter.js 파일에서

Action Value, Action Creator, Reducer를 하나하나 직접 코드를 작성해 생성해줘야했음

const initialState = {

  number: 0,

};

const ADD_NUMBER = "ADD_NUMBER";

const REMOVE_NUMBER = "REMOVE_NUMBER";

export const addNumber = (payload) => {

  return {

    type: ADD_NUMBER,

    payload,

  };

};

export const removeNumber = (payload) => {

  return {

    type: REMOVE_NUMBER,

    payload,

  };

};

const counter = (state = initialState, action) => {

  console.log("action => ", action);

  switch (action.type) {

    case ADD_NUMBER:

      return {

        number: state.number + action.payload,

      };

    case REMOVE_NUMBER:

      return {

        number: state.number - action.payload,

      };

    default:

      return state;

  }

};

export default counter;

 

하지만 RTK의 slice API를 이용하면 초기상태만 설정해주고

나머지 Action Value, Action Creator, Reducer들을 한 번에 생성해줌

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

const initialState = {

  number: 0,

};

// 기존에는 액션 value, 액션 크리에이터, reducer를 따로 만듦

// slice는 한 번에 만듦

// counterSlice는 객체를 인자로 받음

const counterSlice = createSlice({

  name: "counter", // 모듈의 이름

  initialState, // 모듈의 초기상태

  reducers: {   // 모듈의 Reducer 로직이자 Action Creator가 되고 또한,  Action Value도 함수의 이름을 따서 자동으로 생성

    addNumber: (state, action) => {

      state.number = state.number + action.payload;

    },

    removeNumber: (state, action) => {

      state.number = state.number - action.payload;

    },

  },

});

export const { addNumber, removeNumber } = counterSlice.actions;

// counterSlices 내부의 addNumber, removeNumber를 뽑아서 내보내기 (컴포넌트에 사용하기 위함)

// addNumber, removeNumber가 액션 크리에이터가 됨

// => 직접 만들지않아도 자동으로 생성해줌 (로직은 추가해줘야함)

export default counterSlice.reducer;

// reducer 또한 자동으로 생성해줌 (configStore에 등록하기 위함)

// 이제 모듈을 store에 연결해줌

 

configStore 비교

// ------------------------기존 방식--------------------------------

// import { combineReducers, createStore } from "redux";

// import counter from "../modules/counter";

// // 1) rootReducer 생성

// const rootReducer = combineReducers({

//   counter,

// });

// // 2) store를 생성

// const store = createStore(rootReducer);

// // 3) 만든 store 내보내기

// ------------------------RTK--------------------------------

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

import counterSlice from "../slices/counterSlice";

const store = configureStore({

  reducer: {

    counter: counterSlice,

  },

});

export default store;

기존의 combineReducers, createStore가 configureStore로 대체

main.jsx의 Provider에 store를 넣어주는 것은 변함없음

03. Redux Devtools

devtools 소개

RTK 사용시 기본적으로 Redux Devtoolkit 사용 가능

어떤 액션이 일어났고, state가 어떤지 등 편리하게 모니터링 가능

(RTK를 사용하지 않아도 dev tools를 사용은 가능하지만 별로도 설치해야함)

Chrome 기준으로 Chrome 웹 스토어에서 확장 설치 가능

Redux환경으로 만들어진 페이지라면 Chrome 확장 탭에서 Redux Devtools를 클릭해 바로 사용 가능

개발자도구에서 Redux 탭이 추가되어 거기서도 확인 가능

04. Flux 패턴

개념

Facebook에 의해 개발된 애플리케이션 아키텍쳐

주로 React와 함께 사용

데이터의 단방향 흐름을 강조 

(단방향 흐름 : 액션 => 디스패처 => 스토어 => 뷰의 순환적인 흐름,

이러면 상호작용이 많을 때 어디에서 문제가 발생하는지 바로 찾을 수 있음)

 

구성 요소 4가지

1. Dispatcher : 애플리케이션 내 모든 데이터 흐름을 관리하는 중앙 허브 역할
   액션들이 발생하면 디스패처를 통해 스토어로 전달
2. Stores : 애플리케이션의 상태(데이터)와 로직을 보유
   스토어는 디스패처를 통해 전달된 액션에 반응하여 상태를 변경
   변경 사항을 뷰에 알려줌
3. Actions : 상태 변화를 일으킬 때 사용하는 간단한 객체
   사용자 인터페이스에서 발생한 사용자의 행동을 액션으로 표현하고, 이를 디스패처를 통해 스토어로 전달
4. Views (React Components) : 사용자 인터페이스를 구성하는 React 컴포넌트들
   스토어에서 상태가 변하면, 뷰는 이를 반영하여 사용자 인터페이스를 업데이트

Ducks 패턴과 Flux 패턴

각각 코드의 구조화와 데이터 관리 방식에서 차별화된 접근 제공

Ducks 패턴은 주로 코드를 단순화하는데에 초점

Flux 패턴은 데이터의 흐름을 체계화하는 데 초점

둘 다 애플리케이션의 상태 관리와 데이터 흐름의 체계를 잡는 것이 목적

=> Redux를 사용하는 React 애플리케이션에서 함께 사용