[React] 리덕스 툴킷(RTK) 사용하기

리덕스 툴킷을 사용하기 위해서는 툴킷을 설치해야한다
일단 CRA로 프로젝트를 생성한 후 툴킷을 설치한다

yarn add @reduxjs/toolkit

간단하게 성공...!

그 후에는 폴더구조를 리덕스와 같이 만들었다
src폴더 안에 modules과 config폴더를 만들고 modules안에 Slice라는 이름을 붙여서 모듈을 만들고 config폴더 안에는 configStore를 만들어 중앙 상태관리소를 만들었다

기존에는 덕스패턴을 사용하여 action value, action creator, reducer에 맞게 작성했다면
리덕스 툴킷에 내장되어 있는 createSlice라는 api를 사용하여 action value, action creator, reducer 이 세 가지를 한꺼번에 합쳐서 작성할 수 있다

예를 들면

// action value
const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";
const TOGGLE_TODO = "TOGGLE_TODO";

// action creator
export const addTodo = (payload) => {
  return {
    type: ADD_TODO,
    payload,
  };
};

export const deleteTodo = (payload) => {
  return {
    type: DELETE_TODO,
    payload,
  };
};

export const toggleTodo = (payload) => {
  return {
    type: TOGGLE_TODO,
    payload,
  };
};

// 초기 상태 값(initialState)
const initialState = [
  {
    title: "제목1",
    contents: "내용1",
    isDone: false,
    id: uuidv4(),
  },
  {
    title: "제목2",
    contents: "내용2",
    isDone: true,
    id: uuidv4(),
  },
  {
    title: "제목3",
    contents: "내용3",
    isDone: false,
    id: uuidv4(),
  },
];

// 리듀서 - 변화를 일으키는 함수
const todo = (state = initialState, action) => {
  // console.log(action);
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    case DELETE_TODO:
      return state.filter((item) => item.id !== action.payload);
    case TOGGLE_TODO:
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default todo;

기존에는 위와 같이 action value, action creator, reducer를 다 따로따로 적어주어야했다

리덕스 툴킷을 사용하면 아래와 같이 바꿀 수 있다

const initialState = [
  {
    title: "제목1",
    contents: "내용1",
    isDone: false,
    id: uuidv4(),
  },
  {
    title: "제목2",
    contents: "내용2",
    isDone: true,
    id: uuidv4(),
  },
  {
    title: "제목3",
    contents: "내용3",
    isDone: false,
    id: uuidv4(),
  },
];

//createSlice 
const todoSlice = createSlice({
  name: "todo", // 모듈의 이름
  initialState, //모듈의 초기상태 값
  reducer: {
    // 리듀서 부분은 리듀서의 로직과 동시에 액션크리에이터가 된다
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    deleteTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
    toggleTodo: (state, action) => {
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    },
  },
});

export const { addTodo, deleteTodo, toggleTodo } = todoSlice.actions;
export default todoSlice.reducer;

한 눈에 봐도 코드가 줄어들고 훨씬 간결해진 게 느껴진다
이렇게 할 수 있는 이유는 createSlice라는 툴킷의 api를 사용해서 액션밸류와 크리에이터, 리듀서를 하나로 합칠 수 있기 때문이다