코드스테이츠 소프트웨어 엔지니어링 부트캠프 +61, Redux 인트로

Redux : 어플리케이션에서 정교한 상태관리를 도와주는 라이브러리이다.

https://www.robinwieruch.de/react-redux-tutorial

리액트에서의 상태관리

리액트에서는 컴퍼넌트가 state를 관리한다.

state의 전달은 반드시 부모컴퍼넌트를 통해 이루어지고 자식간(형제간)의 전달은 불가능하다.

리액트에서의 상태관리

State전달은 부모컴퍼넌트를 거쳐서 가능하기 때문에 자식컴퍼넌트가 많아질수록 상태관리가 복잡해진다.

리액트에서는 자식컴퍼넌트간에 State 직접 전달이 불가능하기 때문에 복잡할 수 있다.

리덕스에서의 상태관리

 

리덕스에서는 모든 State를 Store에서 관리한다.

 

Redux

• redux의 3가지 원칙
  • Single Source of truth : state를 하나의 Store에 저장한다
    • state가 여러 장소에 저장되어 있을때보다 디버깅이 쉽다. -> 유지보수 용이
    • 서버에서 state를 다루고 클라이언트로 보내기가 쉽기때문에 universal App을 만들기 쉽다.
    • 일반화된 기능을 수행하는것이 쉬워진다. (실행취소/재시작 같은)
  • State is read-only : state는 Action 객체로만 변경이 가능하다.
  • Changers are made with pure function : state 변경은 순수함수로만 가능하다 => side effect의 영향을 안받기에 예측이 쉽다.

 

• Store : 상태가 관리되는 하나의 공간,  State가 필요할땐 무조건 store에 접근한다.

리덕스에서의 상태관리

 

• Action : 객체이다. Store에게 Data를 운반한다.

const ADD_TODO = 'ADD_TODO'
{
    type: ADD_TODO,
    text: 'Build my first Redux app'
}


JS객체이다.
type 프로퍼티가 필수로 있어야 한다.

 

• Reducer : Reducer는 Action객체의 타입에 따라 그에 맞는 동작을 수행하고 그 결과로 새로운 State를 반환한다.                              
                    

Action을 통해 앱의 데이터가 Store에게 운반되는데 그때 Action객체는 Dispatch 메소드에게 전달되고 Dispatch가 Reducer를 호출하여 새로운 State를 만든다.