[React] Redux Took Kit

RTK

Redux Tool Kit이다.
Redux는 복잡하고, 귀찮은 준비 코드를 많이 작성해야 한다는 단점이 있다.
RTK는 그 단점들을 그것을 해소할 수 있는 라이브러리이다.

toolkit은 reducer 대신 slice를 만든다.
slice에서는 action, action creator를 자동으로 만들어줘서 쓸 코드 양이 줄어들고 굉장히 편리하다.
그리고 아래에서 설명할 immer가 적용되어 있어서
배열과 객체를 쉽게 변환할 수 있다.

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

immer

immer의 produce 함수를 이용하면, draft를 이용하여 불변성을 신경쓰지 않고 배열이나 객체를 수정할 수 있다.

import { produce } from "immer"

const nextState = produce(수정본을 만들고 싶은 원본, draft => {
    draft[1].done = true
    draft.push({title: "Tweet about it"})
})

RTK에는 기본적으로 immer가 적용되어 있지만, zustand에서는 필요하기 때문에 다음 주차를 위해 배운 것이라고 한다 ㅎㅎㅎ