처음 만난 리덕스 (Redux) 문서
14.2 Slice
Redux Toolkit에는 특별히 Slice라는 개념이 등장합니다.
지금부터는 이 Slice에 대해서 배워보도록 하겠습니다.
Slice는 한 마디로 Redux 구성 요소들의 조각이라고 할 수 있습니다.
여기서 Redux 구성 요소들에는 Action Type, Action Creator, 그리고 Reducer 등이 포함됩니다.
그리고 이러한 구성 요소들을 조각으로 분리해 놓은 것을 Redux Toolkit에서는 Slice라고 부르는 것입니다.
그런데 이 Slice와 비슷한 개념을 어디서 들어본 것 같지 않으신가요?
바로 앞에서 배웠던 Ducks pattern에 등장한 Duck file입니다.
Duck은 Redux Reducer Bundle이라고 부르고, Redux의 reducer와 관련된 구성요소들을 모아놓은 일종의 꾸러미라고 배웠습니다.
Redux의 구성요소들을 한 곳에 모아놓는 다는 점에서 Slice와 굉장히 유사한 것을 알 수 있습니다.
하지만 Duck과 Slice가 다른 점이 있는데, 바로 Slice는 Action Type, Action Creator들을 자동으로 생성해준다는 점입니다.
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;
이 코드는 Redux Toolkit의 createSlice() 함수를 사용해서 만든 Slice의 예시 코드입니다.
createSlice() 함수를 호출 할 때, 파라미터로 들어간 객체에서 name은 counter라고 했고, 초깃값으로는 0, 그리고 reducers에는 increase와 decrease 이렇게 두 개의 reducer를 정의했습니다.
이렇게 해서 Slice를 만들게 되면 자동으로 이름에 맞게 Action Type과 Action Creator를 생성해주고, 해당되는 Actione들을 처리할 수 있는 reducer도 만들어줍니다.
{
name: 'counter',
actions : {
increase,
decrease,
},
reducer
}
그리고 만들어진 counterSlice 객체는 위와 같은 형태를 가지게 됩니다.
우리는 이렇게 만들어진 구성요소들을 그냥 가져다 쓰면 됩니다.
일일이 모든 구성요소들을 작성해야 했던 Ducks pattern에 비해서 굉장히 편리하죠?
이것이 Redux Toolkit을 사용하는 것의 큰 장점중 하나입니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.