Redux #2 키워드 정리

액션

상태 변화가 필요할 때 액션이란 것을 발생시킨다. 액션 객체는 다음과 같이 이루어져 있다. type은 필수이고 넣어줄 데이터를 설정할 수 있다.

{
 	type: "TOGGLE_VALUE" 
}

{
	type: "ADD_TODO"
	data: {
    	id: 0,
	    text: '리덕스 배우기'
  	}	
}

{
  	type: "CHANGE_INPUT"
  	text: "안녕하세요"
}

액션은 어떻게 업데이트 해줄지 정의하는 객체라고 생각하자.

액션 생성함수

단순히 파라미터를 받아와서 액션을 만들어주는 함수다.

// function
export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  }
}

// arrow function
export function changeInput = text => ({
  type: "CHANGE_INPUT",
  text
});

액션함수를 만드는 것이 필수는 아니지만 액션함수를 만들어두면 액션객체를 좀 더 편하게 만들 수 있다. 액션함수를 사용하지 않으면 액션을 발생시킬 때마다 액션함수를 그 자리에 작성하면 되긴한다.
👏 결론 : 액션함수를 쓰자.

리듀서

변화를 일으키는 함수. useReducer와 완전히 같다.
리듀서는 두 가지 파라미터를 가져온다.
action타입이 무엇이냐에 따라 state를 업데이트 해주는 방식을 결정한다. 중요한건 아래 예시는 숫자로 예를 들었지만, 객체나 배열이면 불변성을 유지해야 한다는 것이다. 즉, 원본을 직접 수정하지 않으면서 스프레드 연산자같은 것을 사용해서 원본을 직접적으로 변경시키면 안된다.

function reducer(action, state) {
  switch(action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state; // 👏 리덕스의 reducer는 기존의 state를 반환해야 한다! 
      // 이유는 여러개 리듀서를 합쳐서 루트 리듀서를 만들 수 있는데
      // 루트 리듀서 안에 서브리듀서들도 있다. 나중에 만들면서 살펴보자.
  }
}

리듀서에서는 숫자를 제외한 배열이나 객체의 경우 불변성 유지가 핵심! 새로운 객체나 배열을 만들어서 반환하면 된다.

스토어

하나의 애플리케이션당 하나의 스토어를 만들게 된다.
스토어 안에는 현재 앱의 상태와 리듀서가 들어있다.
추가적으로 몇 가지 내장함수가 들어가있다.

스토어의 내장함수 dispatch

그 몇 가지 중 하나가 dispatch! dispatch는 액션을 발생시키는 것이라고 이해하면 된다. 혹은 액션을 스토어에게 전달한다라고 이해해도 된다.

dispatch({type: 'INCREASE'});

dispatch함수에는 액션객체를 만들어서 dispatch 파라미터로 넣어서 호출한다. 호출하면 reducer에게 전달이 되서 reducer에서 새로운 상태를 반환해주면 스토어의 상태가 새로워진다.

👏 정리하면 아래와 같은 Flow다.

dispatch → reducer → store
(action객체 만들어서 주입 → reducer에서 해당 action보고 상태 반환 → store에서 반환된 상태로 업데이트)

스토어의 내장함수 subscribe

호출할 때 파라미터로 특정 함수를 넣어주면 액션이 dispatch될 때마다 우리가 설정한 함수가 호출된다.
어디서 이용할 수 있냐면 스토어의 상태가 업데이트 될 때마다 특정 함수를 호출할 수 있는 것.
리액트에서 리덕스를 사용할 때 이 함수를 직접 사용하는 일은 없다. 대신 react-redux에서 제공하는 connect함수 or useSelector 훅을 사용해서 만약 스토어의 상태가 업데이트 되면 컴포넌트가 리렌더링되는 작업을 대신 처리해준다. 그래서 컴포넌트를 만들게 되면 컴포넌트가 리덕스에 구독을 하게 되는 것이다. 그래서 리덕스의 상태가 업데이트 되면 컴포넌트가 리렌더링 되는 것.

요약: 액션이 발생되서 상태 업데이트 됬을 때 특정 함수 호출!