Redux [Basic] - Action

01.Redux에서 Action이란?

• Action은 객체(object)입니다.

두 가지 형태의 Action

• type은 있지만 payload가 없는 action { type: "TEST" }
• type과 payload둘다 있는 action { type: "TEST" params: "hello" }
• type은 반드시 있어야하는 필수 프로퍼티이며 type은 문자열로 정의해야 합니다.

Action

• Action은 STORE의 상태를 변경하는 용도로 사용 됩니다.
• Action을 STORE에 전달할 때 특별한 인자값을 적어주지 않으면 type만 있는 Action이 전달 됩니다.
• 만약 Action을 이용해 SOTRE의 상태값(state)을 변경하고 싶다면 type과 payload 둘다 있는 action을 사용 합니다.

리덕스의 액션 생성자란?

function 액션생성자(...args) { return 액션; }

• 액션을 생성하는 함수를 액션 생성자(Action Creator)라고 합니다.
• 함수를 통해 액션을 생성하여 액션 객체를 리턴해줍니다.
• createTest("hello"); // { type: "TEST", params: "hello" } 리턴

리덕스의 액션은 어떤 일을 하나요?

• 액션 생성자를 통해 액션을 만들어 냅니다.
• 만들어낸 액션 객체를 리덕스 스토어에 보냅니다.
• 리덕스 스토어가 액션 객체를 받으면 스토어의 상태 값이 변경 됩니다.
• 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경됩니다.
• 액션은 스토어에 보내는 일종의 인풋이라고 생각할 수 있습니다.

액션을 준비하는 두 가지 단계

• 액션의 타입을 정의하여 변수로 빼는 단계

• 필수사항은 아닙니다.

• 그냥 타입을 문자열로 넣기에는 실수를 유발할 가능성이 큽니다.

• 미리 정의한 변수를 사용하면 스펠링에 주의를 덜 기울여도 됩니다.

• 액션 객체를 만들어 내는 함수를 만드는 단계

• 하나의 액션 객체를 만들기 위해 하나의 함수를 만들어냅니다.

• 액션 타입은 미리 정의한 타입 변수로부터 가져와서 사용합니다.

액션 생성 예제

• 파일 생성
  

• src폴더안에 redux폴더 생성

• redux폴더안에 action.js 파일 생성

• actions.js

// 1.액션의 타입을 정의하여 변수로 빼는 단계
const ADD_TODO = "ADD_TODO";

// 2.액션 객체를 만들어 내는 함수를 만드는 단계
function addTodo(todo) {
  return {
    type: ADD_TODO, // 액션의 타입 지정
    todo, // 액션이 할일 지정 (payload)
  }
}