Redux

Redux란??

• 컴포넌트들이 state를 쉽게 공유할 수 있게 해주는 방식
• A -> B -> C -> D -> E -> F로 접근 후 F -> E -> D -> C -> B -> A로 돌아오는 패턴을 A -> Store -> F 처럼 효율적인 접근을 가능하게 해준다.
• 2021-11-11 기준 Weekly Downloads 500백만건으로 인기 많다

Action

• 하나의 객체
• State에 변화가 필요할 때 Action을 발생시킨다.
• type이라는 필드를 가지고 있어야한다.
  • type : 어떤 동작인지 명시 (ex) "NUMBER_COUNT", "CHANGE_INPUT"...)

Action Creator

• Action을 객체로 만들어주는 함수

  export const changeType = (type) => {
    return {
      type : TYPE_CHANGE,
      payload : type
    };
  };

Reducer

• state에 변화를 일으키는 함수
• 현재 state와 Action을 인자로 받아 Store에 접근하여 Action에 맞춰 state를 변경한다.
• return 시 원본 데이터를 변경하지 않는 식으로 리턴 (Immutable)
  • 순수함수
  • ex) return Object.assign({}, state, {navType: action.payload});

Store

• state, Reducer, 내장 함수등을 가지고 있다.
• View에게 state의 변경 사항을 알려주는 역할

Dispatch

• Reducer를 호출해 state를 변경하는 역할
• 인자로 action을 전달한다.
  • ex) dispatch(action)

useSelector()

• 컴포넌트와 state를 연결해주는 역할의 메서드
• 전달인자로 콜백함수를 받으며 콜백함수의 전달인자로 state를 받는다.

useDispatch()

• Action 객체를 Reducer로 전달해주는 역할의 메서드
  • 클릭 등의 이벤트