[React.js] Redux (3)

카테고리 : Development
태그: development · reactjs · redux-toolkit · state · action
등록일: 2023년 04월 10일
최근 업데이트: 2023년 04월 10일

---

• 🚀 redux-toolkit를 이용하여 코드를 작성하는 가장 좋고 현대적인 방법

🚀 redux-toolkit를 이용하여 코드를 작성하는 가장 좋고 현대적인 방법

• Redux-toolkit은 redux 코드를 단순화하기 위한 매우 유명하고 강력한 라이브러리이며 Redux에서 공식적으로 권장합니다.
• Redux-toolkit에는 store, createAction, createReducer 및 createSlice를 구성하는 많은 메서드가 있습니다.
• configureStore 메소드는 redux 스토어를 생성하는 데 사용되며 redux-devTools를 자동으로 구성합니다. 따라서 devtoolsEnhancer 기능을 사용할 필요가 없습니다.
• 그런 다음 payload 속성을 사용하여 작업 개체를 만드는 데 사용되는 createAction 메서드를 봅니다.

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

const addTask = createAction('ADD_TASK');
console.log(addTask({ task: 'Add new task!' }));

//Output in console
{ type: 'ADD_TASK', payload: { task: 'Add new task!' } }

• 그런 다음 switch case 또는 If..else를 작성하지 않고 리듀서 함수를 생성하는 데 사용되는 createReducer 함수.
• 그리고 마지막에는 하나의 함수에서 액션과 리듀서를 생성하는 데 사용되는 createSlice 함수가 있습니다. 이는 코드를 깨끗하고 유지 관리하기 쉽게 만드는 데 매우 유용함.

import { createSlice } from "@reduxjs/toolkit";
let id = 0;

const taskSlice = createSlice({
  name: "tasks",
  initialState: [],
  reducers: {
    // action: function
    addTask: (state, action) => {
      state.push({
        id: ++id,
        task: action.payload.task,
        completed: false,
      });
    },
    removeTask: (state, action) => {
      const index = state.findIndex((task) => task.id === action.payload.id);
      state.splice(index, 1);
    },
    completedTask: (state, action) => {
      const index = state.findIndex((task) => task.id === action.payload.id);
      state[index].completed = true;
    },
  },
});

export const { addTask, removeTask, completedTask } = taskSlice.actions;
export default taskSlice.reducer;

• redux-toolkit을 사용한다면 객체처럼 리듀서를 결합할 수 있음.

import { configureStore } from "@reduxjs/toolkit";
import employeeReducer from "./employees";
import taskReducer from "./tasks";

const store = configureStore({
  reducer: {
    tasks: taskReducer,
    employees: employeeReducer,
  },
});

export default store;