React 와 Redux 의 연결

그동안 React 와 관련 된 것 을 탐색 해 왔 고,손 에 SPA 프로젝트 가 있어 Redux 에 올 라 물 을 시험 해 볼 준 비 를 했다.Redux 자체 와 React 는 연결 되 어 있 지 않 습 니 다.유 니 버 설 Javscript App 모듈 로 App State 관리 에 사 용 됩 니 다.React 프로젝트 에서 Redux 를 사용 하 는 것 이 좋 습 니 다.좋 은 방법 은 react-redux 라 이브 러 리 를 통 해 연결 하 는 것 입 니 다.여기 서 는 react-redux 가 없 으 면 이 두 라 이브 러 리 를 같이 사용 하지 않 는 것 이 아니 라 react-redux 가 패키지 를 제공 하고 더욱 과학적 인 코드 조직 방식 을 제공 하여 React 코드 에서 Redux 를 더욱 편안하게 사용 할 수 있 습 니 다.
이전 에는 Redux 문서 로 만 react-redux 를 알 고 한 동안 실천 한 후에 소스 코드 를 뒤 집 는 동시에 관련 정 리 를 하려 고 합 니 다.제 가 본 코드 의 npm 버 전 은 v 4.0.0 입 니 다.즉,React 버 전 은 0.14.x 입 니 다.
react-redux 는 두 가지 핵심 모듈 을 제공 합 니 다:Provider 와 connect.
Provider
Provider 이 모듈 은 전체 App 의 용기 로 서 기 존의 App Container 를 바탕 으로 한 층 더 포장 합 니 다.이 모듈 의 작업 은 매우 간단 합 니 다.바로 Redux 의 store 를 props 로 받 아들 이 고 context 의 속성 중 하나 로 설명 하 는 것 입 니 다.하위 구성 요 소 는 contextTypes 를 설명 한 후에 this.context.store 를 통 해 store 에 편리 하 게 접근 할 수 있 습 니 다.그러나 우리 구성 요 소 는 일반적으로 이렇게 할 필요 가 없습니다.store 를 context 에 넣 는 것 은 아래 connect 에 사용 하기 위해 서 입 니 다.
이것 은 Provider 의 사용 예시 입 니 다:

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById('root')
)

connect
이 모듈 은 진정한 의미 에서 Redux 와 React 를 연결 한 셈 입 니 다.마침 이름 도 connect 입 니 다.
먼저 Redux 가 어떻게 작 동 하 는 지 고려 합 니 다.먼저 store 에서 state 를 유지 하고 dispatch 는 action 을 하 며 그 다음 에 reducer 는 이 action 에 따라 state 를 업데이트 합 니 다.
우리 의 React 응용 프로그램 에 비 추어 store 에서 유지 하 는 state 는 바로 우리 의 app state 입 니 다.하나의 React 구성 요 소 는 View 층 으로 두 가지 일 을 합 니 다.render 와 응답 사용자 작업 입 니 다.따라서 connect 는 store 에 필요 한 데 이 터 를 props 로 React 구성 요소 에 render 로 전달 하고 action creator 를 포장 하여 사용자 의 작업 에 응답 할 때 dispatch action 을 사용 합 니 다.
자,connect 이 모듈 이 무엇 을 했 는 지 자세히 보 세 요.먼저 사용 한 API 는 다음 과 같 습 니 다.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps 는 함수 입 니 다.반환 값 은 merge 가 props 에 들 어가 야 하 는 state 를 표시 합 니 다.기본 값 은()=>({})입 니 다.아무것도 전달 하지 않 습 니 다.

(state, props) => ({ }) //           

mapDispatchToProps 는 함수 일 수 있 습 니 다.반환 값 은 merge 가 props 만 필요 한 actionCreators 를 표시 합 니 다.여기 actionCreator 는 dispatch 로 포장 되 어 있 을 것 입 니 다.redux 의 bidActionCreators 함 수 를 추천 합 니 다.

(dispatch, props) => ({ //           
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

더 편리 한 것 은 대상 을 직접 받 아들 일 수 있 습 니 다.이때 connect 함수 내 부 는 이 함 수 를 함수 로 바 꿉 니 다.이 함 수 는 위의 예 와 똑 같 습 니 다.
mergeProps 는 merge 프로 세 스 를 사용자 정의 하 는 데 사 용 됩 니 다.다음은 기본 프로 세 스 입 니 다.parentProps 값 은 구성 요소 자체 의 props 입 니 다.구성 요소 의 props 에 같은 이름 이 나타 나 면 덮어 쓸 수 있 습 니 다.

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

options 는 모두 두 개의 스위치 가 있 습 니 다.Pure 는 최 적 화 를 열 었 는 지 여부 입 니 다.자세 한 내용 은 다음 과 같 습 니 다.기본 값 은 true 입 니 다.withRef 는 안에 포 장 된 구성 요소 에 ref 를 사용 합 니 다.getWrapped Instance 방법 으로 이 ref 를 얻 을 수 있 습 니 다.기본 값 은 false 입 니 다.
connect 는 함 수 를 되 돌려 줍 니 다.React 구성 요소 의 구조 함 수 를 연결 대상 으로 받 아들 여 연 결 된 구성 요소 구조 함 수 를 되 돌려 줍 니 다.
그리고 몇 가지 질문:

React 구성 요 소 는 store 의 변화 에 어떻게 응답 합 니까?

왜 connect 선택 적 인 merge 일부 props 는 state 전 체 를 직접 전달 하 는 것 이 아 닙 니까?

퓨 어가 최적화 한 것 은 무엇 입 니까?

우 리 는 connect 가 되 돌아 오 는 함 수 를 Connector 라 고 합 니 다.내부 에 있 는 connect 라 는 구성 요 소 를 되 돌려 줍 니 다.기 존 구성 요 소 를 포장 하 는 토대 에서 내부 에서 Redux store 의 변 화 를 감청 했 습 니 다.포 장 된 구성 요소 가 store 의 변화 에 응 할 수 있 도록 하기 위해 서 입 니 다.

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

그러나 일반적으로 우리 가 연결 하 는 것 은 어떤 Container 구성 요소 입 니 다.모든 App state 를 탑재 하지 않 습 니 다.그러나 우리 의 handler 는 모든 state 변화 에 응답 합 니 다.그래서 우 리 는 최적화 해 야 할 것 은 store State 가 변화 할 때 우리 가 그 부분의 state 변화 에 진정 으로 의존 할 때 만 해당 하 는 React 구성 요 소 를 다시 렌 더 링 합 니 다.그러면 우리 가 진정 으로 의존 하 는 부분 은 무엇 입 니까?mapStateToProps 와 mapDispatchToProps 를 통 해 얻 은 것 입 니 다.
구체 적 으로 최 적 화 된 방식 은 shouldComponentUpdate 에서 검 사 를 하 는 것 입 니 다.구성 요소 자체 의 props 가 바 뀌 거나 mapStateToProps 의 결과 가 바 뀌 거나 mapDispatchToProps 의 결과 가 바 뀌 었 을 때 shouldComponentUpdate 가 true 로 돌아 갈 수 있 습 니 다.검사 하 는 방식 은 shallow Equal 의 비교 입 니 다.
그래서 어떤 reducer 에 게:

export default (state = {}, action) => {
 return { ...state } //           ，      reRender
 // return state //         reRender
}

또한 connect 를 할 때 맵 이 진정 으로 필요 로 하 는 state 나 actionCreators 를 props 에 조심 하여 불필요 한 성능 손실 을 피해 야 합 니 다.
마지막 으로 connect 의 API 에 따 르 면 ES7 decorator 기능 을 사용 하여 React ES6 의 쓰기 에 맞 출 수 있 습 니 다.

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

OK.이상 이 바로 본문의 전체 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주시 기 바 랍 니 다.