Redux

Redux is a predictable state container for JavaScript apps

예측 가능한 상태관리

애플리케이션의 복잡성을 획기적으로 낮추고 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어준다.

 

Component 간의 정보 공유

형제 컴포넌트들 간에 데이터를 주고받을 때, 부모 컴포넌트를 통해서 주고받는다.

 

그런데 자식이 많아진다면...?

상태 관리가 매우 복잡해진다!!

 

 

이런 복잡성을 줄이기 위해서 상태 관리 라이브러리 Redux를 사용

 

 

Redux의 세 가지 원칙

1. Single source of truth -> stroe

2. State is read-only -> action

3. Changes are made with pure functions -> reducer

 

Store

상태가 관리되는 오직 하나의 공간

 

Action

어떤 행동을 취할 것인지 정의해 놓은 객체

Store에게 데이터를 운반해주는 역할

{
  type: "ORDER",
  drink: {
  	menu: "Americano",
    size: "Grande",
    iced: false
  }
}

 

Reducer

현재 상태와 Action을 이용해 다음 상태를 만들어 냄

Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state 생성

 

Redux의 기본 개념 Overview

 

Redux의 장점

1. 상태를 예측 가능하게 만듦

2. 유지보수

3. 디버깅에 유리(action, state log 기록 시)

4. 테스트를 붙이기 쉬움