Intro
리덕스는 스토어를 이용한 상태관리 라이브러리
리덕스는 자바스크립트앱에서 예측가능한 상태관리를 해주는 컨테이너
what is state? in react
- 컴포넌트 내에서 관리하는 웹에서 필요한 상태들을 담아주는 공간
- 형제 컴포넌트 간에 데이터를 주고 받을 때 부모 컴포넌트 통해 주고 받는다.
- 이는 형제가 많을 때 상태관리가 복잡해지는 문제가 생긴다.
⇒ 복잡성을 줄이기 위해 상태관리 라이브러리 Redux를 활용
Redux의 세 가지 원칙
- Single source of truth
- 동일한 데이터는 항상 같은 곳에서 데이터를 가져온다.
- 데이터를 저장하는 store라는 하나뿐인 공간이 있다.
- State is read-only
- action이라는 객체를 통해서 state를 변경할 수 있다.
- Changes are made with pure functions
- Store
- 상태가 관리되는 오직하나의 공간
- 컴포넌트와 별개로 스토어라는 공간이 있다.
- 스토어 안에 앱에서 필요한 state를 두고 컴포넌트들에서 state정보가 필요할 때 store에 접근해서 state정보를 가져올 수 있다.
- Action
- 자바스크립트 객체
- 객체안에 type을 비롯한 다양한 데이터가 담긴다.
- 이 객체는 애플리케이션의 데이터를 스토어에 운반을 하는 역할을 한다.
- Reducer
- Action객체가 Dispatch메소드에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.
- 한 방향으로 데이터가 흘러야 하기 때문에 이런 공식을 따른다.
Redux의 장점
- 상태를 예측가능하게 만들어 준다.
- 리듀서는 순수함수라서 다음상태가 어떻게 될지 쉽게 예측을 할 수 있다.
- 유지보수에 용이하다.
- 디버깅에 유리하다(action과 state log기록 시)
- action이 생겼을 때 어떤 일이 일어났는지 추적이 가능하다.
- 테스트를 붙이기 쉽다.