Redux

Redux

자바스크립트 앱에서 예측 가능한 상태를 관리해주는 컨테이너
라이브러리(react의 라이브러리가 아니다, react없이도 사용 가능)

React의 state(상태)는 class component 안에서 관리

Immutable Data

1. shallow equality checking을 위해서
2. 궁극적으로 데이터 핸들링을 안전하게 만들어준다
3. 시간여행 디버깅을 위해서는 reducer가 순수 함수로 존재해야한다

Redux의 3가지 원칙

1. single source of truth: 동일한 데이터는 출처가 하나(Store)
2. state is read-only: 상태는 읽는 것만 가능, action 객체는 전달만 한다(Action)
3. changes are made with pure function: 변경은 순수 함수로만 가능(Reducer)

Redux의 3가지 개념

store: 상태(state)가 관리되는 오직 하나의 공간, 상태 저장 공간 및 출처가 된다
action: 자바스크립트 객체(type은 꼭 있어야 하고 대문자를 사용, switch문을 사용)
reducer: 현재 상태와 action을 이용해 다음 상태를 만들어 낸다
(action 객체는 dispatch에게 전달되고, dispatch는 reducer를 호출해 store에 새로운 state를 생성)

Redux의 장점

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

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