Redux-Keyword

내일배움캠프 LGLG!

5주차(주특기 숙련 - React)

Redux Keyword

1. 액션 (Action)
   상태에 변화가 필요할 때 발생시킴 (객체 하나로 표현)

{
  type: "TOGGLE_VALUE";
}

type을 필수로 그 외의 값들은 개발자 마음대로,,

{
  type : "ADD_TODO",
  data : {
    id : 0,
    text : '리덕스 배우기'
  }
}

{
  type : "CHANGE_INPUT",
  text : '리덕스 배우기'
}

1. 액션 생성 함수 (Action Creator)
   액션을 만드는 함수
   단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.
   컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함 (필수 아님)

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수 사용 예시
export const changeInput = (text) => ({
  type: "CHANGE_INPUT",
  text
});

1. 리듀서 (Reducer)
   변화를 일으키는 함수
   두가지 파라미터를 받아옴 (현재의 상태와 액션을 참조하여 새로운 상태를 반환)

   function reducer(state, action) {
     // 상태 업데이트 로직
     return alteredState;
   }
   

   카운터 리듀서 작성 예시

   function counter(state, action) {
     switch (action.type) {
       case "INCREASE":
         return state + 1;
       case "DECREASE":
         return state - 1;
       default:
         return state;
     }
   }
   

2. 스토어 (Store) 한 애플리케이션당 하나의 스토어
   현재의 앱 상태와 리듀서, 내장함수 포함

3. 디스패치 (Dispatch)
   스토어의 내장 함수
   액션을 발생 시키는 것

4. 구독 (Subscribe)
   스토어의 내장 함수
   subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출
   (리액트에서는 connect 함수 또는 useSelector Hook 을 사용)