[리덕스] Redux-Toolkit 사용 API 정리

Redux-Toolkit?

아래의 요구사항을 해결하기위한 패키지이다. 리덕스의 불편사항을 어느정도 해결해준다.

- 너무 많은 보일러플레이트 코드

- 복잡한 리덕스 store설정

- 다른 유용한 패키지를 추가하고 싶다

createAction()

Redux의 action type을 정의하는 생성자 함수임.

import { createAction } from '@reduxjs/toolkit'

const increment = createAction<number | undefined>('counter/increment')

let action = increment(); // { type: 'counter/increment' }

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

console.log(increment.toString()) // 'counter/increment'

문서: https://redux-toolkit.js.org/api/createAction

createReducer()

Redux reducer 함수를 만든다.

 

action이 전달(dispatched)됐을 때, 상태를 업데이트해주는 reducer 함수와 구체적인 action types를 매핑해준다.

switch와 case문 없이도, 매핑해준다!

문서: https://redux-toolkit.js.org/api/createReducer

 

 

 

createReducer() API와 함께 사용하기

createReducer(actionCreator, reducer)

- actionCreator : createAction으로 생성한 액션 생성자

- reducer: 리듀서 함수

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

const increment = createAction<number>('counter/increment')
const decrement = createAction<number>('counter/decrement')

const counterReducer = createReducer(0, (builder) => {
  builder
    .addCase(increment, (state, action) => state + action.payload)
    .addCase(decrement, (state, action) => state - action.payload)
})

 

Builder Callback Notation 사용

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

interface CounterState {
  value: number
}

const increment = createAction('Counter/increment')
const decrement = createAction('Counter/decrement')
counst incrementByAmount = createAction<number>('Counter/incrementByAmount')

const initialState = { value: 0 } as CounterState

const counterReducer = createReducer(initialState, (builder) => {
  builder.addCase(increment.type, (state, action) => state.value++)
  .addCase(decrement.type, (state, action) => state.value--)
  .addCase(incrementByAmount.type, (state, action) => state.value += action.payload)
})

 

builder.addMatcher?

파라미터

- matcher: 타입스크립트에 matcher 함수. type predicate 함수여야만 한다

- reducer: 리듀스함수

 

 

builder.addDefaultCase?

기본 실행. 

 

 

 

PayloadAction

PayloadAction은 액션의 payload 필드의 타입을 지정할 수 있게 해주는 제네릭이다.