[데브코스 Day53] 2022.12.28

📖오늘 배운  것

Redux

:Prop Drolling을 해결하기 위한 라이브러리

 

리덕스에서 사용되는 키워드

• 액션

: 상태에 변화가 필요할 때 액션을 발생

액션 객체에는 type 필드가 필수적이다.

 

• 액션 생성함수

: 액션을 만드는 함수. 파라미터를 바아와서 액션 객체 형태로 만들어준다.

export const addTask = (content: string): Action => {
  return {
    type: "ADD_TASK",
    payload: {
      id: v4(),
      content,
      complete: false,
    },
  };
};

 

• 리듀서

:변화를 일으키는 함수

현재 상태, 전달받은 액션 두 가지 파라미터를 받아서 새로운 상태를 만들어 반환한다. useReducer를 사용하는 것과 똑같은 형태를 가지고 있다.

export const tasks = (state: Task[] = [], action: Action) => {
  switch (action.type) {
    case "ADD_TASK": {
      const newTask = action.payload;
      return [...state, newTask];
    }
    case "UPDATE_TASK": {
      const updateTask = action.payload;
      return state.map((oldTask) =>
        oldTask.id === updateTask.id ? updateTask : oldTask
      );
    }
    case "REMOVE_TASK": {
      const removedTask = action.payload;
      return state.filter((task) => task.id !== removedTask.id);
    }
    default: {
      return state;
    }
  }
};

 

 

• 스토어

: 한 애플리케이션 당 하나의 스토어를 만들고 스토어 안에는 현재 앱의 상태, 리듀서, 내장 함수 등이 들어있다.

 

• 디스패치

: 스토어의 내장함수 중 하나. 액션을 발생시키는 역할을 하고 액션을 파라미터로 받는다.

호출을 하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고해서 새로운 상태를 만든다.

 

 

 

 

💭배운 점

리덕스는 처음보는데 vue 배울 때 배웠던 vuex랑 비슷하지만 더 어려운 것 같다😂 프로젝트에 사용할지 여부와 상관 없이 배워두면 좋을 것 같다.

 

 

https://react.vlpt.us/redux/

6장. 리덕스 · GitBook