Redux 란?
- Redux는 자바스크립트 상태관리 라이브러리이다.
왜 필요한가?
- React의 데이터 흐름이 Top-down인 것과 Lifting State Up을 고려하면 컴포넌트가 상태를 공유하기 위해서 복잡한 과정의 Props 전달이 필요한데, 이런 문제를 신경쓰지 않고 컴포넌트 표현에만 집중할 수 있도록 단일 상태 저장소를 제공한다.
- 컴포넌트 개수가 작고 Props 전달 과정을 쉽게 파악할 수 있다면 굳이 Redux를 사용할 필요는 없다.
Redux 주요요소 4가지
- Store : 모든 상태를 보관하는 단 하나의 저장소
- Reducer : Action과 state를 기본으로, 새로운 state를 작성해서 반환하는 메소드.
- Dispatch : Action을 Reducer로 전달해주는 메소드. ex) dispatch(Action)
- Action : 자바스크립트 객체. type 속성은 필수로 하며 그 외에 필요한 state들을 담은 객체.
어떻게 store의 state에 접근하는가?
- const counter = useSelector(state => state.counter)
=> useSelector를 사용하면 state의 속성 중 counter에 직접 접근할 수 있다.
어떻게 store의 state를 변경하는가?
- dispatch를 통해 reducer로 Action을 보내면 Action type에 따라 state를 변경한다.
- const dispatch = useDispatch()
ex) dispatch( { type: Add_Item, payload: {id: 1, color: red} } )
Redux의 3원칙
- Single Source of Truth (Store와 관련한 원칙)
앱의 전역 상태(global state)는 단일 store 내의 트리 구조의 객체로 저장된다.
다시말해 rootState가 하나 있고, rootState의 자식으로 reducer1, reducer2와 같은 식으로 될 것이고, 각 reducer 안에 별도의 객체 구조를 가질 수 있다.
useSelector(state => state.reducer1) 라고 하면 rootState의 자식 중 reducer1이 반환하는 state에 접근할 수 있다.
전역객체는 단일 트리 구조로 이루어져 있어 이전 상태를 조회하기 쉬워 디버깅에도 매우 용이하다. - State is read-only (Action과 관련한 원칙)
전역 상태를 변경하는 유일한 방법은 Action을 Reducer로 전달하는 것이다.
그래야만 Lifecycle에 따라 리렌더링이 일어나며, 모든 state들이 log 되어 디버깅에 용이한 트리 구조를 유지할 수 있다.
- Changes are made with pure functions (Reducer와 관련한 원칙)
Action에 따라 State변경이 어떻게 이루어지는 지 명확하게 지정하기 위해 Reducer는 '순수 함수'로 만든다. State 변경은 Reducer에서 오직 Action에 의해서만 이루어진다. 따라서 Reducer는 인자로 기존state와 action만을 가지며, 리턴값이 두 매개변수 외에 다른 외부변수와는 전혀 관계가 없는 '순수 함수'로만 이루어져 있다.
Data Flow in Redux
UI에서 버튼 클릭과 같은 이벤트가 일어났을 때 dispatch 메소드로 Action 객체를 Reducer로 전달해 주고, Reducer는 Action 객체의 type에 따라 기존 state를 참조해 새로운 State를 만들어준다.
