[Redux] Redux Toolkit - createSlice()

이다은·2022년 2월 18일

React

목록 보기

2/5

redux를 사용하면 상태 관리가 편리하다는 장점이 있지만 reducer와 action을 따로 관리해야하기 때문에 코드의 양이 늘어난다는 번거로움이 있더라구요
그래서 이번 글은 비교적 간단한 코드로 상태 관리를 할 수 있게끔 도와주는, createSlice라는 redux-toolkit에 대한 내용입니다

createSlice란?

createSlice()
: 리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아들이고 해당 액션 생성자와 액션 유형으로 슬라이스 리듀서를 자동으로 생성합니다

action 타입 정의, action 생성 합수: Actions.js
initial state 정의, reducer 함수: Reducers.js

이 전의 코드들은 위와 같은 구조를 가지고 있었습니다. createSlice를 이용하면 action과 reducer를 하나의 파일에서 관리할 수 있습니다
createAction, createReducer 함수가 내부적으로 사용되며, createSlice에 선언된 슬라이스 이름(아래 예시 코드의 name 부분)을 따라서 reducer와 action 생성자, action type을 자동으로 생성합니다

createSlice 사용해보기

// SearchSlice.tsx
import { createSlice } from '@reduxjs/toolkit'

const SearchSlice = createSlice({
    name: "reducers",
    initialState: {
        list: []
    },
    reducers: {
        addToList(state, action) {
            state.list = action.payload
        }
    }
})

// action과 reducer를 export 해줍니다 
export const searchAction = SearchSlice.actions
export const searchReducer = SearchSlice.reducer

// Main.tsx
import {searchAction} from "./components/store/SearchSlice";
import {useDispatch} from "react-redux";

const dispatch = useDispatch();
...

dispatch(searchAction.addToList(response.data));

위처럼 createSlice를 사용하면 action type, action 생성 함수, reducer까지 한번에 작성할 수 있습니다
dispatch 하는 방법은 동일합니다. 앞서 export 해준 action을 dispatch 함수의 파라미터로 넣어줍니다

name
- slice의 이름으로, prefix로 사용됩니다
- reducer가 undefined 상태 값으로 호출될 때마다 사용됩니다
initialState
- 초기 상태 값입니다
reducers
- reducer 들을 만들 수 있습니다
- action type은 위의 name을 prefix로 사용해서 자동 생성됩니다
  ex) reducers/addToList