Redux (2)

Redux (2)

🚀 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;
  • 또한 이 확장으로 추적을 수행할 수 있으며 이 확장에서 로그 파일을 가져오고 내보낼 수도 있음.