Redux Flow

 

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() : 루트컴포넌트는 하위(우직한) 컴포넌트가 액션을 실행할 수 있도록 콜백을 준비

CC BY-NC-ND 2.0 KR

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용할 수 있습니다. 크리에이티브 커먼즈 라이선스

저작권과 관련된 파일요청 및 작업요청을 받지 않습니다.

댓글 남기기