Redux
금주는 상태관리 라이브러리 Redux를 접해본다.
Definition
Redux is predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different enviorments (client, server, and ative), and are easy to test.
한줄 요약하자면,
-> Redux는 JavasCript app에서 예측 가능한 상태관리 컨테이너이다.
What is state?
React에서 사용한 this.state는 state내에서 상태관리를 한다. 그 state내에 app에서 필요한 내용들을 담아두는 공간이었다.
자식 컴포넌트 1에서 -> 2로 그 데이터가 옮겨가려면 이 순서를 따라야 한다.
- 자식 컴포넌트1 -> 부모컴포넌트
- 부모컴포넌트 -> 자식 컴포넌트2
x 자식끼리의 direct한 데이터 전달은 불가능하다. x
What if there are numerous components?
앞선 사진처럼 단순하지 않고, 현 이미지처럼 수많은 자식 컴포넌트가 있다면? 너~무나도 상태관리가 복잡해질 것이다.
"자식 컴포넌트5 -> 자식 컴포넌트9 까지의 데이터 전달은 너무나도 험난해졌다!!"
So, we use Redux
그러한 복잡성을 줄이기 위해 상태관리 라이브러리 중 하나인 Redux를 사용한다!
Redux's basic rules
- Single source of truth: 동일한 데이터는 항상 같은곳에서 데이터를 가지고 온다!
- State is read-only: state를 변경하려면 action이라는 객체를 이용해서 변경이 가능하다. (마치 React에서 'setState' method를 사용했던 것 처럼.)
- Changes are made with pure functions: 변경은 순수함수로만 가능하다 -> Reducer와 관련된 rule.
Redux Rule #1. Store
Store는 상태가 관리되는 오직 하나의 공간이다.
Component와 별개로 Store라는 공간이 있다. App에서 그 정보가 필요할때 Component가 아닌, Store에 접근을 해서 그 정보를 가져온다. (초반부 React의 component 데이터 흐름과 대비해본다면 이론만으로도 얼마나 편리한지 감이 온다.)
Redux Rule #2. Action
Action은 JavaScript 객체이며, Store에게 Application의 데이터를 운반해주는 역할을 한다.
데이터를 담고 있으니 역시 그 안에는 다양한 내용들이 담기게 된다. 가령 현 예시 객체의 'drink' 값들을 보면 어떤 'menu'를 주문 했는지, 'size'는 무엇인지, 'isIced' 아이스인지, 따듯한 음료인지의 정보가 담겨있다.
정보를 보아하니 카페에서 사용할 Order App 인듯 하다.
Redux Rule #3. Reducer
앞서 Action을 사용하여 위 App의 data를 Store에 운반, 전달할수 있다는 개념이 있었다. 순서는 Action에서 Reducer를 거치고, Store에서 New State가 생성된다.
이 과정은 Redux의 문법, 공식과 같으며, 문장 암기가 필수적이라 한다. 한단계 더 쪼개보면, Action객체가 Dispatch Method에 전달된다. 전달된 후에는 Reducre를 호출해서 New State 값을 Store에 만들어 낸다.
마지막으로 한번 더!
1. Action 객체로부터 Dispatch Method에 데이터가 전달 된다.
2. 데이터가 전달된 후에는 Dispatch가 Reducer를 호출한다.
3. Reducer 호출 후에는 새로운 State를 Store에 만들어 낸다.
