Redux

컴포넌트 상태 분리

Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리

리리액트는 자식끼리 데이터 교환 x

부모를 통해야 한다.

Redux : 3가지 원칙

• Single source of truth

  동일한 데이터 항상 같은곳에서 가져온다. 데이터 저장 공간(Store) 존재

• State is read-only

  읽기 전용. 리덕스에서는 액셔을 통해 State 변경 직접 변경 x

• Changes are made with pure functions

  순수함수로만 변경 가능, side effect 금지, API 호출 금지, 인수 변경 금지

Store

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

Action

자바스크립트 객체

어플리케이션 데이터를 —> Store 에게 전달

Reducer

현재 상태와 Action을 이용해 상태를 만들어 낸다.

Action 객체 → method Dispatch → Reducer → Store(New State)

액션객체가 디스패치 메소드에 전달이 되고 디스패치가 리듀셔를 호출해서 새로운 스테이츠를 생성한다.

브라우저 디포짓 클릭 —> 디스패치의 전달인자로 액션객체를 담아서 전달

비둘기가 편지를 전달하는 비유로 생각하니까 이해하기 쉬웠다.
비둘기는 메소드 dispatch이고 편지는 액션이다.
편지는 혼자서 날아갈 수 없고 비둘기가 물고 편지를 전달해줘야 한다.
Store 공간에 도착해서 reducer라는 함수가 편지를 이러쿵 저러쿵 바꿔서 새로운 state로 반환한다.

장점

1. 상태를 예측 가능하게 만들어 준다.
2. 유지보수
3. 디벙깅에 유리하다(action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.