[React.js] Redux (2)

카테고리 : Development
태그: development · react · Redux · State · Action · Reducer · Dispatch · ActionCreator · AsyncAction · Middleware · Store · StoreCreator · StoreEnhancer · redux-devTools
등록일: 2023년 04월 09일
최근 업데이트: 2023년 04월 09일

---

• 🚀 redux 작동방식
  • 📌 Redux 구현을 위한 4단계:
  • 💻Creating Reducer function:
  • 📜 redux 스토어 구성
  • 🧑🏻‍💻  Store에서 데이터 전달
  • 🔔구독 및 탈퇴 방법
  • 🚀redux-devTools 구성 방법

🚀 redux 작동방식

• 우리는 모든 애플리케이션 상태(데이터)를 Store라는 단일 위치에 저장. 프런트엔드용 데이터베이스로 저장
• 3가지 주요 부분
  • Store - 모든 데이터를 저장
  • Reducer - 데이터를 추가, 업데이트 및 삭제하는 기능(사용 방법) •
  • Actions - 수행할 작업(무엇을 해야 하는지)을 정의
• Reducer 기능을 통해서만 Store 데이터를 변경할 수 있습니다..
• 할일 목록 만들기
  • Action - ADD_TASK
  • Reducer - perform how to add task in the store

📌 Redux 구현을 위한 4단계:

• Designing the store - Store 객체의 모습
• List actions - 애플리케이션에서 수행
• 리듀서 만들기 - 해당 작업을 수행하는 방법을 정의하는 기능
• 리덕스 스토어 생성

💻Creating Reducer function:

• 감속기는 두 개의 인수를 받는 순수 함수입니다. 첫 번째는 초기 또는 현재 상태이고 두 번째는 작업 개체
• 이 함수 내에서 If..else를 사용하거나 Switch 케이스를 사용하여 작업 유형을 식별할 수 있습니다.

let id = 0;
export default function reducer(state = [], action) {
  switch (action.type) {
    case ADD_TASK:
      return [
        ...state,
        {
          id: ++id,
          task: action.payload.task,
          completed: false,
        },
      ];
    case REMOVE_TASK:
      return state.filter((task) => task.id !== action.payload.id);
    case TASK_COMPLETED:
      return state.map((task) =>
        task.id === action.payload.id
          ? {
              ...task,
              completed: true,
            }
          : task
      );
    default:
      return state;
  }
}

📜 redux 스토어 구성

• 리덕스 스토어를 생성하기 위해 우리는 리덕스 라이브러리에 createStore라는 함수가 있고 루트 리듀서를 매개변수로 전달하기만 하면 됌.

import { legacy_createStore as createStore } from "redux";
import reducer from "./tasks";
const store = createStore(reducer);
export default store;

🧑🏻‍💻  Store에서 데이터 전달

• 어떤 액션을 발송하려면 store.dispatch 메소드를 사용해야 하고 type 속성(액션 이름)과 페이로드 속성(액션과 관련된 데이터를 전달할 수 있음)을 가진 액션 객체를 전달해야 됌.

store.dispatch({ type: "ADD_TASK", payload: { task: "Add new task" } });

🔔구독 및 탈퇴 방법

• YouTube에서 구독 기능을 사용함에 따라 store.subscribe 메서드는 스토어 개체에 변경 사항이 있을 때 알림을 받는 데에도 사용

store.subscribe(() => {
  console.log("Updated", store.getState());
});

• 이 콜백 함수는 redux 스토어의 모든 변경 사항에서 실행.
• 이제 이 구독 방법을 중지하려면 구독 취소를 사용해야함.

const unsubscribe = store.subscribe(() => {
  console.log("Updated", store.getState());
});
unsubscribe();

🚀redux-devTools 구성 방법

npm i redux-devtools-extension 또는 yarn add redux-devtools-extension

• configureStore 파일에서 이 라이브러리를 사용하여 라이브러리를 설치 하고 이 라이브러리에서 devToolsEnhancer를 가져옴.

import { legacy_createStore as createStore } from "redux";
import { devToolsEnhancer } from "redux-devtools-extension";
import reducer from "./tasks";

const store = createStore(reducer, devToolsEnhancer({ trace: true }));

export default store;

• 또한 이 확장으로 추적을 수행할 수 있으며 이 확장에서 로그 파일을 가져오고 내보낼 수도 있음.