[TIL] Redux 개념정리 2

📌 액션 (Actions)

state에 어떠한 변화가 일어날 때 우리는 액션이란 것을 발생시킨다. 이는 하나의 객체로 표현되는데, 액션 객체는 아래와 같은 형식으로 이뤄져있다.

액션 객체

const ADD_ITEM = "ADD_ITEM";

{ type: ADD_ITEM, text: 'Build my first Redux app' }

• 액션 객체는 type 필드를 필수적으로 가지고 있어야한다.
  상수이므로 대문자로 작성하는것이 컨벤션이다.

액션 생성함수

const ADD_ITEM = "ADD_ITEM";

export const addItem = (payload) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload
  };
};

• 액션 생성함수는 액션을 만드는 함수이다.
• 액션객체를 만들지 않고 위와같이 파라미터를 받아와서 함수로 작성할 수 있다.
• payload는 액션이 발생했을때 사용하는 값이다.

📌 리듀서 (Reducer)

const ADD_TODO = "ADD_TODO";

function reducer(state = initialstate, action) {
	switch (action.type) {
		case ADD_TODO : // action의 type이 ADD_TODO 일 경우
	  // ... 상태업데이트 로직
  }
  return state;
}

• 리듀서는 액션 객체를 전달받으면 액션의 타입에 따라 어떻게 상태를 업데이트 해야 할지 업데이트 로직을 정의하는 함수이다.
• 리듀서는 두가지의 매개변수를 받아온다.
  1. state : 현재 상태
  2. action : 액션 객체
• 그리고 이 두가지 매개변수를 참조하여 새로운 상태 객체를 만들어서 이를 반환한다.

📌 리스너 (listener)

상태에 변화가 생기면 이전에 컴포넌트가 스토어한테 구독 할 때 전달해줬던 함수 listener가 호출된다. 이를 통하여 컴포넌트는 새로운 상태를 받게되고 이에따라 컴포넌트는 리런더링 하게된다.