Redux - Action

리덕스의 액션이란?

• 액션은 객체(Object)이다.
• 두가지의 형태가 있다

• // type 1 
  {type: 'TEST'} // payload 없는 액션 
  
  // type 2 
  {type: 'TEST', params: 'hello'} // payload 있는 액션

• 필수 프로퍼티는 type 하나이며, type은 보통 문자열(string)이다.
• 액션은 스토어에 전달이 되면 스토어의 상태를 변경하는데 사용된다.

리덕스의 액션 생성자 (Action Creater)

• 액션을 생성하는 함수를 액션 생성자라고 한다.
• 함수를 통해 액션을 생성하여 액션 객체를 리턴해주는 함수이다.
• createTest(’hello’); // {type: ‘TEST’, params: ‘hello’} 와 같은 구조다.

리덕스의 액션의 역할

액션 생성자를 통해 만들어진 액션은 리덕스 스토어에 보내진다.

리덕스 스토어가 액션 객체를 받으면 스토어의 상태값이 변경되고 변경된 상태 값에 의해 상태를 이용하는 컴포넌트가 변경된다.

즉 액션은 스토어에 보내는 일종의 인풋이라 생각할 수 있다.

리덕스 액션 준비

• 액션의 타입을 정의하여 변수 생성
  • 필수는 아니지만 타입을 문자열로 넣으면 실수를 유발할 가능성이 크다.
  • 미리 정의한 상수를 사용하면 스펠링에 주의를 덜 기울여도 된다.
• 액션 객체를 만드는 함수를 만들기
  • 하나의 액션 객체를 만들기위해 하나의 함수를 만든다.
  • 액션의 타입은 미리 정의한 타입 변수로부터 가져와서 사용한다

액션 함수 예제

// actions.js
const ADD_TODO = "ADD_TODO";

function addTodo(todo) {
  return {
    type: ADD_TODO,
    todo,
  };
}