Redux
자바스크립트 앱에서 예측 가능한 상태를 관리해주는 컨테이너
라이브러리(react의 라이브러리가 아니다, react없이도 사용 가능)
React의 state(상태)는 class component 안에서 관리
Immutable Data
- shallow equality checking을 위해서
- 궁극적으로 데이터 핸들링을 안전하게 만들어준다
- 시간여행 디버깅을 위해서는 reducer가 순수 함수로 존재해야한다
Redux의 3가지 원칙
- single source of truth: 동일한 데이터는 출처가 하나(Store)
- state is read-only: 상태는 읽는 것만 가능, action 객체는 전달만 한다(Action)
- changes are made with pure function: 변경은 순수 함수로만 가능(Reducer)
Redux의 3가지 개념
store: 상태(state)가 관리되는 오직 하나의 공간, 상태 저장 공간 및 출처가 된다
action: 자바스크립트 객체(type은 꼭 있어야 하고 대문자를 사용, switch문을 사용)
reducer: 현재 상태와 action을 이용해 다음 상태를 만들어 낸다
(action 객체는 dispatch에게 전달되고, dispatch는 reducer를 호출해 store에 새로운 state를 생성)
Redux의 장점
- 상태를 예측 가능하게 만들어 준다
- 유지보수에 용이하다
- 디버깅에 유리하다(action과 state log 기록시, redux데부트)
- 테스트를 붙이기 쉽다
Presentational 컴포넌트와 / Container 컴포넌트
기능: 어떻게 보여지는가 / 어떻게 동작하는가
redux와 연관성: 없음 / 있음
read data: props에서 data를 읽음 / redux의 state에 접근(useSelector)
change data: props에서 콜백을 호출 / redux action
Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트
class component vs function component(state, LC API를 가질 수 없었음)
useState(state를 제공), useEffect(Life cycle API를 제공)
Component -(useSelector)-> State
Action -(useDispatch)-> Reducer
