💻 Redux-Toolkit

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

RTK(Redux Tool kit)

Redux

먼저 리덕스는 Flux 아키텍처의 구현체로 대형 MVC 애플리케이션에서 종종 나타나는 데이터 간 의존성 이슈를 해결하기 위해 고안되었다.

리덕스를 사용하는 구조에서는 전역 상태를 전보 하나의 저장소(store) 안에 있는 객체 트리에 저장하며, 상태를 변경하는 것은 어떤 일이 서술하는 객체인 액션(action)을 내보내는(dispatch) 것이 유일한 방법이다.
그리고 전체 애플리케이션의 상태를 어떻게 변경할지 명시하게 위해서는 리듀서(reducer)의 작성이 필요하다.

이 모든 설계는 데이터가 단방향으로 흐른다는 전제하에 데이터의 일관성을 향상시키고 버그 발생 원인을 더 쉽게 파악하려는 의도에서 출발했음을 알 수 있다.

RTK는 왜 만들어졌을까?

리덕스를 더 쉽게 사용하기 위해서! 만들어졌다.

리덕스에는 아래와 같은 문제가 있었다고 한다.

1. 리덕스 스토어 환경 설정은 너무 복잡하다.
2. 리덕스를 유용하게 사용하려면 많은 패키지를 추가해야한다.
3. 리덕스는 보일러플레이트, 즉 어떤 일을 하기 위해 꼭 작성해야 하는 코드를 너무 많이 요구한다.

RTK는 리덕스를 작성하는 표준 방식이 되기 위한 의도로 만들어졌다고 한다.

RTK의 주요 API

1. configureStore()

• 스토어를 구성하는 함수
• 리덕스 코어 라이브러리의 표준 함수인 createStore를 추상화한 것이다.
• 리덕스의 번거로은 기본 설정 과정을 자동화하였다.

import { configureStore } from '@reduxjs/toolkit'

import rootReducer from './reducers'

const store = configureStore({ reducer: rootReducer })

위처럼 선언하면 기본 미들웨어로 redux-thunk를 추가하고 개발 환경에서 리덕스 개발자 도구를 활성화해준다.

2. createReducer()

• 상태에 변화를 일으키는 리듀서 함수를 생성하는 유틸 함수
• 내부적으로 immer 라이브러리를 사용하여 불변 업데이트가 이루어지도록 로직을 간단히 할 수 있다.

const todosReducer = createReducer(state = [], (builder) => {
  builder.addCase('UPDATE_VALUE', (state, action) => {
    const {someId, someValue} = action.payload;

    state.first.second[someId].fourth = someValue;
  })
})

build callback 표기법

• createReducer의 콜백 함수 인자로 주어지는 builder 객체는 addCase, addMatcher, addDefaultCase라는 메서드를 제공한다.

각 라인마다 빌더 메서드를 나누어 호출하거나 체이닝 형태로 작성하면 된다.

• addCase: 액션 타입과 맵핑되는 케이스 리듀서를 추가하여 액션을 처리한다.
• addMatcher: 새로 들어오는 모든 액션에 대해서 주어진 패턴과 일치하는지 확인하고 리듀서를 실행한다.
• addDefaultCase:addCase나 addMatcher도 실행되지 않았다면 실행된다.

3. createAction()

• 액션 타입 상수와 액션 생성자 함수를 분리하여 선언하던 방법을 결합하여 추상화하였다.

// AFTER
import { createAction } from '@reduxjs/toolkit'

const increment = createAction('counter/increment')

const action = increment(3)
// { type: 'counter/increment', payload: 3 }

4. createSlice()

• createAction,createReducer함수가 내부적으로 사용되며 createSlice에 선언된 슬라이스 이름을 따라서 리듀서와 그리고 그것에 상응하는 액션 생성자와 액션 타입을 자동으로 생성한다.
• 따라서 createSlice를 사용하면 createAction,createReducer를 작성할 필요가 없다.

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface Item {
  id: string
  text: string
}

const todosSlice = createSlice({
  name: 'todos',
  initialState: [] as Item[],
  reducers: {    
    addTodo: {
      reducer: (state, action: PayloadAction) => {
        state.push(action.payload)
      },
      prepare: (text: string) => {
        const id = nanoid()
        return { payload: { id, text } }
      },
    },
  },
})

const { actions, reducer } = todosSlice
export const { addTodo } = actions

export default reducer 

• 액션 차입은 슬라이스 이름을 접두어로 사용해서 자동 생성된다. -> 'todos/addTodo'
• 이에 상응하는 액션 타입을 가진 액션이 디스패치 되면 리듀서가 실행됩니다.

5. createAsyncThunk

• createAction의 비동기 버전을 위해서 제안되었다.
• 액션 타입 문자열과 프로미스를 반환하는 콜백 함수를 인자로 받아서 주어진 액션 타입을 접두어로 사용하는 프로미스 생명 주기 기반의 액션 타입을 생성한다.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)

    return response.data
  }
)

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {})
      .addCase(fetchUserById.fulfilled, (state, action) => {
	      state.entities.push(action.payload)
      })
      .addCase(fetchUserById.rejected, (state) => {})
  },
})

dispatch(fetchUserById(123))

• 꼭 서버와 통신이 이루어지는 구간에서만 사용되는 것은 아니고 비즈니스 로직을 비동기 형태로 구현할 때 응용할 수도 있다.

🔥 느낀점

redux를 배우면서 이것저것 설정할 것, 만들어야 할 파일들이 너무 많았는데 Redux Toolkit을 적용하면서 로직이 많이 간단해지는 것을 볼 수 있었다.

화해 팀에서 rtk에 대해 자세히 정리해 놓은 글을 참고하였는데 자세히 정리해주셔서 이해가 좀 쉽게 된 것 같다.

이제 redux-toolkit이랑 redux-thunk 실습하면서 공부한 내용을 정리하러 가겠습니다!!

Refer

• 프로그래머스 데브코스
• Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?