Redux Toolkit

Redux Toolkit(RTK)은 Redux 로직을 작성하기 위해 리덕스팀에서 공식적으로 추천하는 방법입니다. RTK는 Redux 앱을 만들기에 필수적으로 여기는 패키지와 함수들을 포함합니다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 앱을 만들기 쉽게 해주는 모범 사례를 통해 만들어졌습니다.

RTK는 store, 리듀서 생산과 action 함수 작성, 상태 "조각" 전부를 한번에 작성 등 일반적인 작업들을 단순화해주는 유틸리티를 포함하고 있습니다.

여러분이 첫 프로젝트에 Redux를 새로 도입하는 입문자든 기존 앱을 단순화하고 싶은 경험자든 상관 없이, Redux Toolkit은 더 나은 Redux 코드를 만들게 도와줍니다.

Redux Toolkit은 NPM에서 패키지로 받아 모듈 번들러나 Node 앱에서 사용 가능합니다.

1. Store 생성 / configureStore

import { configureStore } from '@reduxjs/toolkit'

import rootReducer from './reducers'

const store = configureStore({ reducer: rootReducer })
// The store now has redux-thunk added and the Redux DevTools Extension is turned on

또한 아래와 같이 configureStore을 할 때 다른 새로운 것들을 추가할수도 있습니다.

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  devTools: process.env.NODE_ENV !== 'production',
  preloadedState,
  enhancers: [batchedSubscribe(debounceNotify)],
})

만약, 리덕스 툴킷이 없었다면 리덕스 이외의 작업들을 세팅하기가 더 복잡하고 번거로웠지만 위와 같이 편하게 세팅하도록 도와줍니다.

2. reducer로직과 action 함수 생성 / CreateReducer

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, value: state.value + 1 }
    case 'decrement':
      return { ...state, value: state.value - 1 }
    case 'incrementByAmount':
      return { ...state, value: state.value + action.payload }
    default:
      return state
  }
}

지금까지는 위와 같이 로직을 작성해야했습니다. { ...state, value: state.value + 1 }를 살펴보면 기존에 있는 state를 나열한 후 변경할 것을 뒤어 써 새로운 state를 반환했습니다.

리덕스 툴깃은 새로운 state를 반환하지 않고 바로 수정할 수 있도록 도와줍니다.(내부적인 패키지 이용으로 새로운 state를 반환하는 것과 같습니다.)

import { createAction, createReducer } from '@reduxjs/toolkit'

//createAction를 이용해 action객체를 보다 쉽게 생성할 수 있습니다.
const increment = createAction('counter/increment')
const decrement = createAction('counter/decrement')
const incrementByAmount = createAction('counter/incrementByAmount')

const initialState = { value: 0 }

//createReducer을 이용해 state를 보다 쉽게 다룰 수 있습니다.
const counterReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(increment, (state, action) => {
      state.value++
    })
    .addCase(decrement, (state, action) => {
      state.value--
    })
    .addCase(incrementByAmount, (state, action) => {
      state.value += action.payload
    })
})

3. state를 한번에 작성 / createSlice

createSlice함수를 이용하면 action과 reducer을 한번에 작성할 수 있습니다.

import { createSlice } from '@reduxjs/toolkit'

const initialState = { value: 0 }

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action) {
      state.value += action.payload
    },
  },
})

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