reducer와 slice

Reducer

createSlice를 사용하지 않고 순수한 Redux에서의 reducer는 순수 함수로, 현재 상태와 액션을 받아서 새로운 상태를 반환한다.
Redux에서는 많은 boilerplate 코드를 작성해야 하고, 액션 생성자와 리듀서를 일일이 정의해야 한다.
개발자는 액션 타입 문자열을 일일이 작성하고 액션 생성자와 리듀서를 따로 만들어야한다.

 

Slice

createSlice 함수는 리듀서 함수, 액션 생성자 함수, 초기 상태를 한 번에 생성한다.
createSlice는 기본적으로 immer라는 라이브러리를 사용하여 불변성을 유지하는 로직을 자동으로 처리하기때문에 상태를 직접적으로 변경해도 된다.
createSlice로 생성된 slice는 자동으로 액션 생성자를 생성하고 액션 타입을 관리하므로 더 적은 boilerplate 코드를 필요로한다.

// Reducer without createSlice
const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

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

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

 

공부한답시고 Slice를쓰지않고 Saga와 history, connection같이 이전버전으로 사용을해봤느데 에러도많고 작성해야할 것들이 너무 많았다. 

타입을 하나하나 만들고 액션을 설정했는데 Slice를 사용하니 그 모든 코드가 사라졌다.
확실히 createSlice를 사용하면 코드가 더 간결해지고, 액션 생성자와 액션 타입에 대한 관리도 더 편리하다는 것을 느꼈다.