[Redux with TS] createSlice란?

 

오늘은 createSlice에 대해 알아보겠습니다.

 

 

🧑🏻‍💻 createSlice

createSlice란 리듀서 함수의 대상인 초기 상태와 "슬라이스 이름"을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수를 말합니다.

 

내부적으로는 createAction 및 createReducer를 사용하므로 Immer를 사용하여 "변형"되지 않는 업데이트를 작성할 수 있습니다. 

 

슬라이스를 생성하려면 슬라이스를 식별하기 위한 문자열 이름, 초기 상태 값 및 상태를 업데이트할 수 있는 방법을 정의하는 하나 이상의 리듀서 함수가 필요합니다. 슬라이스가 생성되면 생성된 Redux 액션 생성자와 전체 슬라이스에 대한 reducer 기능을 내보낼 수 있습니다. 

 

Redux는 데이터 사본을 만들고 사본을 업데이트하여 모든 상태 업데이트를 불변으로 작성하도록 요구합니다. 그러나 Redux Toolkit의 createSlice 및 createReducer API는 Immer 내부를 사용하여 올바른 변경 불가능한 업데이트가 되는 "변경" 업데이트 논리를 작성할 수 있도록 합니다. (Immer가 내장되어 있어 불변성을 유지하기 위해서 추가적으로 코드를 작성하지 않아도 됩니다.)

 

import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
 
interface CounterState {
  value: number
}
 
const initialState = { value: 0 } as CounterState
 
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})
 
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

 

📌 Parameters

createSlice는 다음 옵션과 함께 단일 구성 객체 매개변수를 허용합니다. 

 

function createSlice({
   // 액션 타입에 사용되는 이름
    name: string,
    // reducer의 초기 상태
    initialState: any,
    // "case reducers"의 객체. 키 이름은 작업을 생성하는데 사용된다.
    reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>
    extraReducers?:
    | Object<string, ReducerFunction>
    | ((builder: ActionReducerMapBuilder<State>) => void)
})

 

⭐️ initialState

reducer의 초기 상태 값입니다.

 

⭐️ name

이 상태의 문자열 이름입니다. 생성된 작업 유형 상수는 이 이름을 접두사로 사용합니다.

 

⭐️ reducers

Redux "case reducer" 함수 (특정 작업 유형을 처리하기 위한 함수, 스위치의 단일 case 문과 동일)를 포함하는 개체입니다.

 

개체의 키는 문자열 작업 유형 상수를 생성하는 데 사용되며 dispatched 될 때 Redux DevTools에 표시됩니다.

또한 응용 프로그램의 다른 부분이 정확히 동일한 문자열을 가진 작업을 dispatch 할 경우 해당 reducer가 실행됩니다. 

따라서 함수에 설명이 포함된 이름을 지정해야 합니다. 

 

※ 사용 예시 

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

export type CounterStatesType = {
    value : number;
}

export const counterSlice = createSlice({
    name: 'counter',
    initialState : {
        value: 0
    } as CounterStatesType,
    reducers: {
        increment: state => {
            state.value += 1;
        },
        decrement: state => {
            state.value -= 1;
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload;
        }
    }
});

 

※ payload?

createSlice 함수의 reducers 객체 내에서 prepare 함수를 사용하면, 액션 생성자 함수가 액션을 생성할 때 추가적인 데이터 가공 또는 인자 처리를 할 수 있습니다. 

 

prepare 함수는 Redux Toolkit에서 도입된 개념으로, 액션 생성자 함수가 받은 인자들을 가공하여 실제 액션 객체로 반환하는 역할을 수행합니다. 

 

일반적으로 액션 생성자 함수는 인자를 그대로 payload로 사용하여 액션 객체를 생성합니다. 하지만, prepare 함수를 사용하면 액션 객체를 더 유연하게 구성할 수 있습니다. prepare 함수는 객체를 반환하는 함수로, 반환된 객체는 실제 액션 객체의 payload 프로퍼티가 됩니다. 

 

prepare 함수의 형식은 다음과 같습니다. 

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

const postsSlice = createSlice({
  name: "posts",
  initialState: [],
  reducers: {
    postAdded: {
      reducer(state, action) {
        state.push(action.payload);
      },
      prepare(title, content) {
        // 인자들을 가공하여 payload 객체를 반환
        return {
          payload: {
            id: nanoid(),
            title,
            content,
          },
        };
      },
    },
  },
});

export const { postAdded } = postsSlice.actions;
export default postsSlice.reducer;

 

위 예제에서 postAdded 액션 생성자 함수는 title과 content를 인자로 받으며, prepare 함수에서는 이 인자들을 가공하여 id와 함께 payload 객체로 반환합니다. 그리고 이  payload 객체는 실제 액션 객체의 payload 프로퍼티로 사용되어 리듀서 함수에서 처리됩니다. 

 

이렇게 함으로써 액션 생성자 함수를 호출할 때마다 prepare 함수에 정의된 가공 작업이 수행되어 액션 객체의 구조를 더 유연하고 편리하게 제어할 수 있습니다.

 

 

⭐️ extraReducers 

Redux의 핵심 개념 중 하나는 각 slice reducer가 상태의 일부를 "소유"하고, 많은 slice reducer가 독립적으로 동일한 액션 타입에 응답할 수 있다는 것입니다. 'extraReducers'를 사용하면 createSlice가 생성한 타입 외에도 다른 액션 타입에 응답할 수 있습니다.

 

'extraReducers'로 지정된 case reducer는 "외부" actio을 참조하기 위해 사용되므로 slice.actions에서 생성된 액션은 없습니다.

 

reducer와 마찬가지로, 이런 case reducer는 createReducer에 전달되며 상태를 안전하게 "변경"할 수 있습니다. 

 

reducers와 extraReducers에서 두 개의 필드가 동일한 액션 타입 문자열을 가지게 된다면, reducers의 함수가 해당 액션 타입을 처리하는 데 사용됩니다. 

 

⭐️ The extraReducers "builder callback" notation

extraReducers를 사용하는 권장 방법은 ActionReducerMapBuilder 인스턴스를 받는 콜백을 사용하는 것입니다. 이 빌더 표기법은 matcher reducer와 default case reducer를 slice에 추가하는 유일한 방법입니다. 

 

import { createAction, createSlice, Action, AnyAction } from '@reduxjs/toolkit'
const incrementBy = createAction<number>('incrementBy')
const decrement = createAction('decrement')
 
interface RejectedAction extends Action {
  error: Error
}
 
function isRejectedAction(action: AnyAction): action is RejectedAction {
  return action.type.endsWith('rejected')
}
 
createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(incrementBy, (state, action) => {
        // action is inferred correctly here if using TS
      })
      // You can chain calls, or have separate `builder.addCase()` lines each time
      .addCase(decrement, (state, action) => {})
      // You can match a range of action types
      .addMatcher(
        isRejectedAction,
        // `action` will be inferred as a RejectedAction due to isRejectedAction being defined as a type guard
        (state, action) => {}
      )
      // and provide a default case if no other handlers matched
      .addDefaultCase((state, action) => {})
  },
})

 

이 API를 사용하는 것을 권장하는 이유는 TypeScript의 지원이 더 좋기 때문입니다. 따라서 제공된 액션 생성자에 기반하여 리듀서에서 액션 타입을 올바르게 추론할 수 있습니다.

 

특히 createAction과 creatAsyncThunk에서 생성된 액션을 처리할 때 특히 더 유용합니다.

 

⭐️ The extraReducers "map object" notation

extraReducers의 "map object" 표기법은 reducers와 마찬가지로 Redux case reducer 함수를 포함하는 객체일 수 있습니다. 그러나 키는 다른 Redux 문자열 액션 타입 상수여야 하며, createSlice는 이 매개변수에 포함된 reducers에 대해 액션 타입이나 액션생성자를 자동으로 생성하지 않습니다.

 

createAction을 사용하여 생성된 액션 생성자는 계산된 속성 문법을 사용하여 직접 키로 사용할 수 있습니다.

 

const incrementBy = createAction('incrementBy')
 
createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {},
  extraReducers: {
    [incrementBy]: (state, action) => {
      return state + action.payload
    },
    'some/other/action': (state, action) => {},
  },
})

 

 

🏷️ Tip

 

TypeScript를 사용하는 경우, 기본적으로  builder 콜백 API를 사용하는 것을 권장합니다. 만약 builder 콜백을 사용하지 않고 TypeScript를 사용하는 경우, 계산된 속성을 키로 사용하기 위해 'actionCreator.type' 또는 'actionCreator.toString()'을 사용해야 합니다.

 

📚 ref 

 

https://redux-toolkit.js.org/api/createSlice

createSlice | Redux Toolkit

https://ko.redux.js.org/tutorials/quick-start

Quick Start | Redux