Action, Reducer, Store, Dispatch

📍Action

상태를 변화시킬 때 발생하는 객체

- 필수로 type 필드를 갖고 있어야 함

- 다른 프로퍼티 추가 가능

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

 

action을 반환하는 action creator 함수 형태로 만들어서 사용하면  export를 앞에 붙여 재사용할 수 있음

 

📍Reducer

변화를 일으키는 함수로, 2가지 매개변수롤 가짐

- state

- action

 

전달받은 현재 state와 action으로 새로운 state 생성

const initialState = {
  count: 1
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return state.count + 1;
    case "DECREMENT":
      return state.count - 1;
    default:
      return state
  }
}

 

⭐reducer로 HTTP 요청을 보내는 로직을 만들면 안됨

- reducer 함수는 100% 동기적으로 작동하기 때문

- 또한 reducer는 순수함수이다 (매개변수로 받은 것만 변경하고 외부 변수 접근 X)

 

📍Store

한 어플리케이션은 하나의 store를 갖는다

store 내부에는 현재 state와 reducer, 및 기타 내장함수가 존재한다

 

📍Dispatch

store의 내장함수로, action을 발생시키는 동작

dispatch(action) 처럼 action 객체를 매개변수로 넣어 호출

dispatch가 호출되면 store는 reducer 함수를 실행시켜 새로운 상태 생성