[Redux] Dispatch

 

 

Redux의 dispatch에 대해서 알아보자!

 

 

---

 

 

  Redux Dispatch의 개념과 역할 

 

Dispatch : 발송하다, 파견하다.

Dispatcher : 발송하는 역할을 하는 것

Dispatch는 Action을 발송하는 역할을 한다!

발송한 Action의 수신자는 바로 Redux이다!

즉, Action이 발생했다는 것을 Redux에게 알리는 역할을 하는 것이다.

 

 

 

Flux Architecture의 전체 구성도를 보면, 오른쪽 위에 Dispatcher가 위치하고 있다.

Action이 생성되면 해당 Action이 Dispatcher로 전달되고, Dispatcher는 Action을 Redux로 보내서 처리하도록 만든다.
그리고 Redux가 Action을 받아서 상태를 변경하게 된다.

 

 

---

 

 

 Dispatch 사용 방법 

 

store의 dispatch() 함수를 쓴다.

dispatch는 action 객체를 인자로 받아 Store에 전달한다. 예를 들어, 카운터를 증가시키는 action을 dispatch하는 코드이다.

// 카운트 증가 액션
const incrementAction = { type: 'INCREMENT' };

// Dispatch
store.dispatch(incrementAction);

 

 

 

 

Payload와 함께 사용하기: 추가 데이터를 전달하여 더 동적인 상태 변경이 가능하다.

store.dispatch({ type: 'INCREMENT', payload: 5 });

 

 

---

 

 

 Dispatch 사용 예제 

 

// Reducer
function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Action creators
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// Dispatch 예제
store.dispatch(increment());
store.dispatch(decrement());

 

 

 < 코드 설명 > 

 

 

1) Reducer

function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

- Reducer의 역할 : dispatch가 전달한 Action 객체를 처리하여 상태(State)를 업데이트하는 순수 함수이다.

- Reducer는 현재 상태(state)와 액션(action)을 받아 새로운 상태를 반환한다.

 

 

2) Action Creators

const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

- Action Creator의 역할 : dispatch에 전달될 Action 객체를 생성한다.

- Action 객체는 type 속성을 반드시 포함하며, 상태를 어떻게 변경할지 설명한다.예: { type: 'INCREMENT' }

- dispatch는 Action Creator에서 생성된 Action 객체를 받아 Reducer에 전달한다.

 

 

3) Dispatch

store.dispatch(increment());
store.dispatch(decrement());

- Dispatch의 역할 : dispatch는 Action 객체를 Store에 전달하여 상태 업데이트를 트리거한다.

- dispatch(increment())는 increment 함수가 반환한 { type: 'INCREMENT' } Action 객체를 Store로 보낸다.

- Store는 Reducer를 호출하여 해당 Action을 처리하고 새로운 상태를 반환한다.

- 상태가 변경되면, 필요한 UI 업데이트나 구독된 리스너가 실행된다.