Redux 흐름

출처 : https://redux.js.org/tutorials/essentials/part-1-overview-concepts

1. 사용자가 UI에서 "Deposit $10" 버튼 클릭

• UI(User Interface): 화면에 보이는 컴포넌트.
• 이 컴포넌트는 현재 잔액이 $0인 상태.
• 사용자 행동 : 사용자가 "Deposit $10" 버튼 클릭.
• 이때 실제로는 아무런 데이터가 변경되지 않고 클릭 이벤트가 발생했을 뿐.

2. 이벤트 핸들러가 실행되고 액션을 생성

• 이벤트 핸들러: "Deposit $10" 버튼을 클릭하면 버튼에 연결된 함수(이벤트 핸들러)가 호출.
• 액션 생성: 이 함수는 아래와 같은 액션 객체를 생성

{ type: 'deposit', payload: 10 }

• type: 이 액션이 어떤 종류의 액션인지를 나타냄. 여기서는 "deposit"을 나타냄.
• payload: 액션에 포함된 추가 데이터. 여기서는 10, 즉 $10을 의미.

3. 액션을 Dispatch(디스패치)하여 스토어로 전달

• Dispatch: dispatch()라는 함수를 호출하여 방금 생성된 액션을 스토어(Store)로 보냄.

dispatch({ type: 'deposit', payload: 10 });

• 디스패치가 실행되는 순간, Redux의 스토어는 이 액션을 받게 됨.
• 스토어는 애플리케이션의 모든 상태를 중앙에서 관리하는 역할.

4. 스토어가 액션을 Reducer로 전달

• Reducer: 액션을 받아 상태를 변경하는 순수 함수.

• Reducer는 두 가지 입력을 받음:

  • 현재 상태
    - 예를 들어, 현재 잔액은 $0.

  • 액션
    - 방금 디스패치된 { type: 'deposit', payload: 10 }라는 액션.

Reducer는 이 두 입력을 사용해 새로운 상태를 계산.
상태 업데이트 로직

switch (action.type) {
  case 'deposit':
     // 상태 업데이트: 기존 잔액 + 10
    return { ...state, balance: state.balance + action.payload };
  default:
    return state;  // 다른 액션 타입이면 아무 변화 없음
}

여기서, 현재 상태가 $0이고 액션의 payload가 10이기 때문에, 새로운 상태는 $0 + 10 = $10.

5. 스토어에 새로운 상태 저장

• Reducer가 반환한 새로운 상태, 즉 $10,은 스토어에 저장.
• 스토어는 새로운 상태가 업데이트된 사실을 기록하고, 이 상태를 사용하는 컴포넌트들에게 전달.

6. UI가 상태 변화에 반응하여 업데이트

• 스토어가 새로운 상태를 전달함에 따라, UI는 그에 맞게 업데이트.
  - 기존 UI에는 잔액이 $0으로 표시.
  - 이제 새로운 상태는 $10이므로, UI는 잔액을 $10으로 업데이트해서 사용자에게 표시.