[Redux] Action

   목차 

1. Action이란?

2. Action과 Reducer의 관계

3. Action 생성자 (Action Creator)

4. Action의 Dispatch 과정

 

 

 

 

 

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

 

 

 

---

 

 

 

 1. Action이란? 

 

 1) Action의 정의 

 

- Redux State(store에 저장돼있는 데이터)에 변화를 주기 위한 행동  

- Action은 상태를 변경하기 위해 반드시 사용되는 순수 객체(Pure Object)이다.

- 무엇을 해야 하는지(명령)를 나타내며, 상태 변경의 유일한 출발점이다.

 

 

 2) Action의 구성요소 

 

- type: 액션의 종류를 나타내는 문자열 (필수)

- payload: 상태를 변경하는 데 필요한 데이터 (선택)

 

{
  type: 'ADD_TODO',
  payload: { text: 'Redux 공부하기' }
}

 

 

---

 

 

 2. Action과 Reducer의 관계 

 

- Action은 상태를 변경하지 않는다. 대신 Reducer가 Action을 기반으로 새로운 상태를 반환한다.

 

- Action은 Reducer에게 상태를 어떻게 업데이트할지 지시하는 역할을 한다.

 

 

---

 

 

 3. Action 생성자(Action Creator) 

 

 (1) Action Creator란? 

 

- Action 객체를 생성하는 함수이다.

- 중복을 방지하고 코드 가독성을 높이는 데 유용하다.

 

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: { text }
  };
}

 

 

 (2) Action과 Action Creator의 관계 

 

Action Creator 함수에 Action객체 생성에 필요한 데이터 (text)를 파라미터로 넣어서 호출하면, 그 결과로 Action 객체가 생성된다.

 

 Action Creator

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: { text }
  };
}

⬇︎

Action

{
	type : 'ADD_TODO',
    text : 'Redux 공부하기'
}

 

 

---

 

 

 4. Action의 디스패치(Dispatch) 과정 

 

 1) Store과 Dispatch 

 

- Action은 dispatch 함수를 통해 Store로 전달된다.

- Store은 Reducer과 연결되어 Action을 처리한다.

 

 

 2) Action이 상태를 업데이트하는 흐름 

 

- Action 객체가 생성된다.

- Dispatch 함수가 Action을 Store로 보낸다.

- Store은 Reducer를 호출하여 새로운 상태를 반환한다.

- 변경된 상태가 구독자 (컴포넌트)에게 전달된다.