Redux Toolkit (RTK) slice 개념과 사용법 정리

Redux-toolkit(RTK)는 Redux의 여러 단점을 보완한 전역 상태 관리 라이브러리이다

특히 Redux의 3가지의 문제점을 해결했다

1. 너무 복잡하다
2. 잘 쓰려면 추가 패키지가 필요하다
3. 간단한 걸 쓰기 위해서도 많은 코드를 작성해야한다 → action type, action creator, reducer ..

https://www.linkedin.com/pulse/some-topic-flow-redux-toolkit-i-cover-jeet-sikder

---

slice

slice는 reducer, action.type, action creator등을 한번에 만들 수 있는 redux 확장 개념이다

 

slice의 사용법을 3단계로 나누면 아래와 같다

코드를 통해 단계를 살펴보자

1. createSlice로 slice를 만든다
2. slice 안에, 필수 요소인 initalState, name, reducers를 설정한다.
3. reducer과 action.creator를 반환한다

 

1. createSlice로 slice를 만든다

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({})

 

2. slice 안에, 필수 요소인 initialState, name, reducers를 설정한다.

1) initialState

상태변화를 위해 처음 상태를 가르키기 위해 initialState가 필요하며, 코드에서는 처음 선언한 initialState와 같은 이름으로 설정하였다

*참고로 오타나면 안된다 

 

2) name

name은 slice 이름을 지정하는 역할을 하는데, 해당 slice의 action 타입에 접두사로 사용된다

 

예를 들어 지금은 counter로 설정 했기 때문에, action type은 'counter/increment', 'counter/decrement'와 같이 생성된다

그럼 우리는 action type이름에 상관하지 않고, acion payload에만 집중해서 작성할 수 있다

 

3) reducers

기존 redux에서 action type에 따라 switch으로 처리를 각각했었는데, 그 처리를 각각의 함수로 만들면 된다

reducer이므로 이전 상태와 action 정보가 필요하다

만약 action이 필요없다면 state만 작성해서 사용 가능하다

const initialState = {count: 0};

const counterSlice = createSlice({
    initialState,
    name: 'counter',
    reducers: {
        increment: (state, action) => { // reducer(prevState, action)
            const value = action.payload;
            state.count = state.count + value;
        },
        decrement: (state, action) => {
            const value = action.payload;
            state.count = state.count - value;
        }
    },
});

 

3. reducer과 action.creator를 반환한다

1) slice.reducer

store에 reducer를 등록해야하므로, slice는 reducer를 반환해야한다

 

2) action creator

slice의 actions안에 action creator가 나온다.. ㅋㅋ

export const counterRedcuer = counterSlice.reducer; // reducer 

export const { increment, decrement } = counterSlice.actions; // action creator

 

 

요약 및 전체 코드

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

// 초기상태
const initialState = {count: 0};

// slice
const counterSlice = createSlice({
    initialState,
    name: 'counter',
    reducers: {
        // 기존 reducer switch 처리를 각각의 함수로 만들기
        // reducer(prevState, action)
        increment: (state, action) => {
            // action.type = 자동으로 "name/increment" 이름으로 결정
            const value = action.payload;
            state.count = state.count + value;
        },
        decrement: (state, action) => {
            const value = action.payload;
            state.count = state.count - value;
        }
    },
});

// slice안에 reducer 있음
export const counterRedcuer = counterSlice.reducer;

// 이름은 actions지만, action creator가 나옴
export const { increment, decrement } = counterSlice.actions;

Redux Toolkit | Redux Toolkit