Action Creators

• Action이 들어오면 포멧을 바꾸어 발송(Dispatch)

Store

• 1개의 Store만 가진다 (Flux와의 차이점)
• 상태 트리(state tree)를 유지
• Action이 들어오면 상태 변화가 필요한지 reducer에게 묻는다.

Reducer

• Updater
• Action이 들어오면, root reducer는 상태 객체의 Key를 기준으로, 해당 reducer에게 넘긴다.
• reducer는 예전상태를 변경하지 않고, 복사본을 만든 후 상태의 변경을 적용
• reducer의 트리 모양의 구조는 컴포넌트 구조처럼 필요한 레벨(트리의 높이)를 가질 수 있다

View

Smart Component

• 스토어와 자식뷰 사이에서 통신
• Action 처리 : 하위의 Dumb Component는 상위의 Smart Component에게 받은 props의 콜백을 호출
• CSS / DOM을 가지고 있지 않음

Dumb Component

• Action은 props의 콜백을 사용하므로, 다른 로직을 가진 다른 애플리케이션에서 재사용 가능
• CSS를 포함

View Layer Binding

• View와 Store를 연결.
• React에서는 react-redux 가 View Layer Binding 역할을 수행
• Component Tree의 모든 컴포넌트들이 스토어에 연결되도록 함
• 컨셉
• 공급 컴포넌트(Provider component) : Component Tree를 감싸는 컴포넌트
• connect() : 상태 업데이트를 받고 싶으면 connect()로 컴포넌트를 감싼다. 
• connect()는 셀렉터로 필요한 연결을 만듬
• 셀렉터 (Selector) : 직접 생성해야 함. 상태의 어떤 부분이 컴포넌트에 필요한지 지정

Root Component

• 컴포넌트 계층의 최상위
• Store, Reducer, View, View Layer Binding 를 불러온다

동작순서

• createStore() : 스토어 생성하고 사용할 reducer를 알려준다.
• combineReducers() : 루트 컴포넌트가 가지고 있는 다수의 reducer를 하나로 묶는다.
• connect() : 루트 컴포넌트를 네트워크에 연결하여, 상태 업데이트를 받을 수 있게한다.
• bindActionCreators() : 루트컴포넌트는 하위(우직한) 컴포넌트가 액션을 실행할 수 있도록 콜백을 준비