[TIL] Redux의 createSlice

createSlice

slice란?

리덕스에서의 slice는 리덕스 구성 요소들의 조각이다.

 

리덕스 구성 요소에는 Action Type, Action Creator, Reducer 등이 포함된다.

 

구성 요소들을 조각으로 분리해 놓은 것을 slice라고 부른다.

createSlice는?

createSlice 함수는 slice를 만들어주는 함수다.

 

createSlice 함수를 이용하면 액션과 리듀서를 하나의 파일에서 관리할 수 있다.

createSlice 사용법

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

const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
      increase: (state, action) => {
          state.count++;
      },
      decrease: (state, action) => {
          state.count--;
      },
    },
});

export const { increase, decrease } = counterSlice.actions;

export default counterSlice.reducer;

 

리듀서 함수의 인자로 객체, slice 이름, 초기 상태 값을 넣는다.

 

호출 결과로 생성된 slice에는 actions, reducer가 포함된 객체가 들어있다.

 

{
    name: string,
    reducer: ReducerFunction,
    actions: Record<string, ActionCreator>,
    caseReducers: Record<string, CaseReducer>.
    getInitialState: () => State,
    reducerPath: string,
    selectSlice: Selector;
    selectors: Record<string, Selector>,
    getSelectors: (selectState: (rootState: RootState) => State) => Record<string, Selector>
    injectInto: (injectable: Injectable, config?: InjectConfig & { reducerPath?: string }) => InjectedSlice
}