React+Redux의 기본 구조 설명

머리

여기 기사가 계속됩니다.

튜토리얼의 Usage with React 부분입니다.
Redux에서 State 관리를 React에서 호출하는 방법을 요약합니다.

Component의 구분

React+Redux 구성에서는 React의 Component를 다음의 2종류로 나누어 생각합니다.

Presentational Components

Container Components

개념적인 것이므로, 어느 쪽이든 없는 컴퍼넌트도 있습니다.

Presentational Component

그리기 위한 컴퍼넌트.
Redux와 직접 관련이없는 일반적인 React의 구성 요소입니다.
Container Component와의 대비로서 사용됩니다.

Container Component

Redux와의 연결용 구성 요소입니다.
그리기를 직접 하지 않고, 내포한 컴퍼넌트의 내용을 그대로 표시합니다.
생성용의 함수가 준비되어 있어, 통상은 그것을 사용해 생성합니다.

어느 쪽이든

그리기도 하는 Redux에의 액세스도 실시하는 컴퍼넌트입니다.
소규모라면 문제 없습니다만, 뚱뚱해지면 상기의 2개의 컴퍼넌트에 분리를 검토합니다.

Container Component 사양

Container Component는 컴포넌트를 하나만 포함합니다.
초기화 시에 다음 동작을 합니다.

State의 일부를 props에로드

dispatch를 호출하는 방법을 props로 설정

확장 된 props로 포함 된 구성 요소 초기화

또 State에 변경이 있었을 경우, props에 변경이 있었을 경우에 아이 요소의 재초기화를 합니다.
상당히 고기능하면서도 패턴화되어 있기 때문에 전용의 생성 함수를 사용해 생성합니다.

react-redux 패키지

Container Component를 생성하기 위한 패키지입니다.
다음 두 가지가 들어 있습니다.

Provider 구성 요소

connect 함수

Prodiver 구성 요소

Container Component가 액세스하는 Store를 설정하기 위한 컴퍼넌트입니다.
후술하는 connect 함수로 생성되는 Container Component 는 Provider 컴퍼넌트하에서만 기능합니다.

거의 고정 주문으로 최상위 레벨에 하나만 선언합니다.

import { Provider } from 'react-redux'
...
const NyaaanComponent = (props) => ( 
  <Provider store={store_you_created}>
    <YoureContainerComponent />
    ...
  </Provider>
)

connect 함수

다음 두 매개 변수를 사용하여 Redux와의 연결을 만듭니다.

mapStateToProps

mapDispatchToProps

const connection = connect(
  mapStateToProps,
  mapDispatchToProps
)

이 커넥션에 포함되는 컴퍼넌트를 세트 해, Container Conponent를 작성합니다.

const MyContainerComponent = connection(InternalComponent)

커넥션은 일회용이므로 이렇게 맞추어 이렇게 씁니다.

const MyContainerComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(InternalComponent)

mapStateToProps

State를 기반으로 props가 확장하는 프로세스를 작성합니다.
Container Component 자체의 props도 건너오므로 세세한 동작을 구현할 수 있습니다.
어디까지나 mapper이므로 너무 복잡한 처리를 넣지 않는 편이 무난하겠지요.

const mapStateToProps = (state, ownProps) => {
  return {
    user: state.user,
  }
}

포함된 구성 요소는 다른 props 멤버와 마찬가지로 액세스할 수 있습니다.

const InternalComponent = (props) => (
  <h1>My name is {props.user}<h1>
)

mapDispatchToProps

dispatch를 호출하는 메소드를 정의하고 props로 설정합니다.

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    addItem: (args) => { dispatch(createAddAction(args)) },
    removeItem: () => { dispatch(createRemoveAction()) },
  }
}

다음과 같이 method를 호출하여 dispatch가 호출되는 구조입니다.

props.addItem('nyaaan')

요약

Presentational Component와 Container Component가 있습니다

Redux와 관련된 것은 Container Component

Container Component는 State 내용과 dispatch 실행 함수를 props로 설정합니다