[Redux] 기본 원리

🎈 Redux 란?

앱의 규모가 커지면 props를 App.js 에서 말단까지 전달해야 한다.

→ Redux 를 사용하면 상태값이 컴포넌트에 종속되지 않고, 컴포넌트 외부의 스토어에서 관리된다.

🎈 Store

출처 : https://wonit.tistory.com/344

createStore 함수를 사용하여 스토어를 생성한다.
스토어에는 상태를 업데이트하는 함수인 Reducer 를 저장한다.

import { createStore } from "redux";

const store = createStore(reducer)

🎈 Reducer

Reducer가 리턴하는 값이 스토어의 상태값이 된다.
action 객체와 현재 상태 state 를 참고하여 상태를 업데이트한다.

const reducer = (state, action) => {
  수행 로직;
  return 값
}

🎈 Action

상태 업데이트 시 Reducer가 뭘 해야하는지, 뭐를 어떻게 해야하는지 알려준다.
type 값을 필수로 포함해야 한다.

{ type: "ADD", diff: 2 }  // 2를 더해라

type 값이 ADD면 값을 더해주고, SUB면 빼주는 식으로
Reducer 속 로직을 구성할 수 있을 것이다.

🎈 Dispatch

컴포넌트에 변화가 생기면, 컴포넌트는 dispatch 함수를 통해 액션을 스토어로 전달한다.

store.dispatch(액션객체)

🎈 Subscribe

컴포넌트는 스토어에 함수를 전달하여 스토어를 구독 한다.
이후, 스토어의 state 값에 변화가 생길 때마다 이 함수가 호출된다.

const 함수 = () => {
  // 수행할 로직
}

subscribe(함수)  // 구독 등록

상태가 변화하고 함수가 호출되면, 구독중인 컴포넌트는 새로운 상태를 받아서 리렌더링 한다.