[9주차] 리액트심화: Redux Toolkit, Redux Devtools

Redux Toolkit

기존 redux의 duck 패턴이 코드의 양을 늘리고 있다는 개발자들의 의견을 수용하여 redux팀이 만든 하나의 toolkit으로 RTK라고도 부른다.

 

---

Redux Toolkit 을 두 가지 예시로 연습하기

1. 카운터 앱

 

(1) 일반 duck 방식의 redux로 구현한 코드

GitHub - dancinncoder/redux-toolkit-counter-practice

 

(2) toolkit 으로 구현하기

GitHub - dancinncoder/redux-toolkit-counter-practice

 

패키지 설치

yarn add react-redux @reduxjs/toolkit

 

 

 

2. todo 앱

 

- todos.js

 BEFORE src > redux > modules > todos.js

import React from "react";
import { v4 as uuidv4 } from "uuid";

// action items
const ADD_TODO = "ADD_TODO";
const REMOVE_TODO = "REMOVE_TODO";
const SWITCH_TODO = "SWITCH_TODO";

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


export const removeTodo = (payload) => {
  return {
    type: REMOVE_TODO,
    payload,
  };
};

/**
 * 메서드 개요 : todo의 id를 입력받아, 일치하는 todo 아이템의 isDone을 반대로 변경
 * 2022.12.16 : 최초작성
 *
 * @param {*} payload
 * @returns
 */
export const switchTodo = (payload) => {
  return {
    type: SWITCH_TODO,
    payload,
  };
};

// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

// reducers
const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO: // 기존의 배열에 입력받은 객체를 더함
      return [...state, action.payload];
    case REMOVE_TODO: // 기존의 배열에서 입력받은 id의 객체를 제거(filter)
      return state.filter((item) => item.id !== action.payload);
    case SWITCH_TODO: // 기존의 배열에서 입력받은 id에 해당하는 것만 isDone을 반대로 변경(아니면 그대로 반환)
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    default:
      return state;
  }
};

// export
export default todos;

 

 

- AFTER src > redux > modules > todos.js

import { createSlice } from "@reduxjs/toolkit";
import { uuid } from "uuidv4";

// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

const todosSlice = createSlice({
  name: "todos",
  initialState: initialState,
  reducers: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    removeTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
    switchTodo: (state, action) => {
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    },
  },
});

export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;
export default todosSlice.reducer;

 

- configStore.js

 BEFORE src > redux > config > configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";
import todos from "../modules/todos";
import { configureStore } from "@reduxjs/toolkit";

// 1. create rootReducer with reducers
const rootReducer = combineReducers({
  todos,
});

// 2. create store
const store = createStore(rootReducer);

// 3. export
export default store;

 

 

AFTER src > redux > config > configStore.js

import { combineReducers } from "redux";
import todos from "../modules/todos";
import { configureStore } from "@reduxjs/toolkit";

// 1. create rootReducer with reducers
const rootReducer = combineReducers({
  todos,
});

// 2. create store
const store = configureStore({
  reducer: {
    todos,
  },
});

// 3. export
export default store;

 

 

---

 

*immer : redux toolkit 안에서 불변성을 지켜주지 않는 코드를 적어도 자동으로 불변성을 유지하게 해준다

 

---

 

Redux Devtools

 

redux toolkit에는 redux devtools가 내장되어 있다.

현재 프로젝트 state 상태, 액션 정보, 액션으로인해 state가 어떻게 변경되었는지 등을 알 수 있는 개발 툴이다.

 

1. 사용방법

개발 플러그인 설치

 

2. 프로젝트에서 리덕스를 사용하고 있으면, 플러그인이 활성화됨

또는 개발자 도구에 들어가 탭에서 redux를 찾기

 

---

Flux Pattern

Flux로의 카툰 안내서

Flux와 Redux