Redux Toolkit_posted by 22-09-07

Soye Park·2022년 11월 1일

backup blog

깃헙블로그백업

목록 보기

9/10

본 포스팅은 깃헙 블로그 사용 당시 작성한 포스팅입니다.

Redux Toolkit

리덕스의 사용 프로세스와 문제점 feat. Redux Toolkit이 만들어진 이유

리덕스는 효과적인 상태관리를 위해 만들어진 자바스크립트 라이브러리이다.

아래는 리덕스 사용방법의 짧은 요약이다.

리덕스는 모든 전역상태를 store에 저장하고 저장해둔 상태를 사용하는 것은 action을 dispatch를 통해 내보내는 방식 하나만으로 가능하다.

그리고 이 action이 상태를 어떻게 변경하고 사용할 지 명시를 하는 것은 Reducer의 작성이 필요하다.

리덕스는 모든 전역상태를 store에 저장하고 저장해둔 상태를 사용하는 것은 action을 dispatch를 통해 내보내는 방식 하나만으로 가능하다.

그리고 이 action이 상태를 어떻게 변경하고 사용할 지 명시를 하는 것은 Reducer의 작성이 필요하다.

위 리덕스 프로세스만 보았을 때는 관리 차원에서 효율적으로 보이나 리덕스를 향해 쏟아지는 불만과 문제제기가 쌓여갔다. 대표적으로 아래 3가지가 있는데,

리덕스 스토어 환경 설정의 복잡성
효율적인 리덕스 사용을 위한 수많은 패키지 설치
보일러플레이트(어떤 일을 하기 위해 “꼭” 작성해야하는 상용구성 코드)를 많이 사용

이렇게 3가지의 문제가 대표적이다.

이런 문제점을 해소하고자 나온 것이 Redux Toolkit(이하 RTK)이다.

Redux Toolkit의 장점은 간략히 아래와 같다.

코드의 간소화
패키지의 간소화

RTK에서 제공하는 대표적인 API 몇가지

1. configureStore

configureStore란?

"리덕스 코어 라이브러리의 표준 함수인 createStore를 추상화한 것"

위와 같이 정의하게 되면 사실 무슨 소린지 나도 잘 모르겠다. 대충 스스로 이해한 부분은 기존에 사용하던 createStore를 대체하여 등장했다는 것과 reducer와 middleware를 한 곳에 모아 보기가 더 편해졌다는 것 정도?

// createStore 사용

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(리듀서이름, composeEnhancers(applyMiddleware(logger)));

export default store;

// configureStore 사용

const store = configureStore({
  // reducer: 리듀서이름
  reducer: rootReducer,
  // middleware: middleware 불러오기
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

export default store;

일단 다른 것보다 코드가 간결해지고 가독성이 좋아졌다. 기존 리덕스의 번거로운 기본설정과정을 configureStore API를 통해 상당부분 자동화하고 단축할 수 있다.

2. createReducer

createReducer란?

switch문으로 실행되던 reducer를 createReducer API를 사용하여 더 가독성 좋게 만들었다. 사실 가독성 부분말고 기술 상의 이점이 분명히 존재하는데, 이는 좀 더 학습한 후 스스로의 언어로 풀어낼 수 있을 때 언급할 수 있도록 하겠다.

const 리듀서이름 = createReducer(초기값, {
 [액션이름] : (state, action) => {해당 액션이 dispatch 되었을 때 실행될 동작},
  [액션이름] : (state, action) => {해당 액션이 dispatch 되었을 때 실행될 동작}
})

3. createAction

createAction이란?

createReducer와 마찬가지로 createAction을 사용함으로서 가독성이 좋아졌는데, RTK에서 리덕스 작성은 기본적으로 Ducks패턴을 사용하기 때문에 액션의 이름은 '리듀서이름/액션이름' 형태로 작성한다.

기존 사용했던 접근법은 액션 타입 상수와 액션 생성 함수를 분리해 선언했기 때문에 작성에 번거로움이 존재하였으나 createAction API를 사용함으로서 하나로 결합하여 사용할 수 있게 되었다.

1	export const 액션이름 = createAction("리듀서이름/액션이름");

4. createSlice

createSlice이란?

리덕스 로직을 작성하는 표준 접근법으로 액션 타입, 액션 생성 함수, 액션별 리듀서 등을 하나의 파일로 통합할 수 있게 해준다.

createSlice의 경우 공식문서에 "리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아 해당 액션 생성자와 액션 유형을 가진 슬라이스 리듀서를 자동으로 생성한다" 라고 설명이 적혀있다.

아래의 예시 코드를 보면 생성된 slice 내부에 순서대로 액션객체의 이름/초기상태값/리듀서 함수가 작성된 것을 볼 수 있다.

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

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  // 액션타입 이름
  name: "counter",
  // 초기 설정 값
  initialState,
  // 여기서 key값은 액션을 생성할 때 액션 객체 이름으로 사용됨
  // 액션객체 이름 : 리듀서 함수
  reducers: {
    increment: (state, action) => {
      state.value = state.value + action.payload;
    },
    decrement: (state, action) => {
      state.value = state.value - action.payload;
    },
  },
});

// export할 때 위 slice 내부에 없는 actions에서 값을 불러올 수 있는 이유는 reducers 값의 요소는 액션객체이름 : 리듀서함수로 이미 설정되어있기 때문(이미 액션을 반환해놨다 얘가...)
export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;