react-redux 의 connect 용법 소개 및 원리 분석

react-redux 에 대한 프로 세 스 맵

흐름 도
connect 용법 소개
connect 방법 설명:

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

역할:React 구성 요소 와 Redux store 를 연결 합 니 다.
매개 변수 설명:

mapStateToProps(state, ownProps) : stateProps

이 함 수 는 store 의 데 이 터 를 props 로 구성 요소 에 연결 할 수 있 습 니 다.

const mapStateToProps = (state) => {
 return {
  count: state.count
 }
}

(1)이 함수 의 첫 번 째 매개 변 수 는 바로 Redux 의 store 입 니 다.우 리 는 그 중에서 count 속성 을 추출 했 습 니 다.state 의 데 이 터 를 구성 요소 에 그대로 전송 할 필요 가 없습니다.state 의 데이터 에 따라 구성 요소 에 필요 한(최소)속성 을 동적 으로 출력 할 수 있 습 니 다.
(2)함수 의 두 번 째 매개 변수 인 ownProps 는 구성 요소 자체 의 props 입 니 다.어떤 때 는 ownprops 도 그 에 영향 을 미친다.
state 가 변 하거나 ownprops 가 변 할 때 mapStateToProps 가 호출 되 어 새로운 stateProps 를 계산 합 니 다.(ownprops merge 와 함께)구성 요소 에 업 데 이 트 됩 니 다.

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 의 두 번 째 매개 변 수 는 mapDispatchToProps 입 니 다.이 기능 은 action 을 props 로 구성 요소 에 연결 하고 MyComp 의 props 가 되 는 것 입 니 다.

[mergeProps],[options]

stateProps 든 dispatchProps 든 모두 ownProps merge 와 함께 있어 야 구성 요소 에 부 여 됩 니 다.connect 의 세 번 째 매개 변 수 는 바로 이 일 을 하 는 데 쓰 인 다.일반적으로 이 인 자 를 전달 하지 않 아 도 됩 니 다.connect 는 Object.assign 을 사용 하여 이 방법 을 대체 합 니 다.
[options](Object)이 인 자 를 지정 하면 connector 의 행동 을 맞 출 수 있 습 니 다.보통 안 써 요.
원리 해석
우선 connect 가 성공 한 이 유 는 Provider 구성 요소 때 문 입 니 다.

원 응용 구성 요소 에 한 층 을 감 싸 서 원래 의 전체 응용 을 Provider 의 하위 구성 요소 로 만 듭 니 다

Redux 의 store 를 props 로 받 아 context 대상 을 통 해 자손 구성 요소 의 connect

에 전달 합 니 다.
그럼 connect 는 뭐 했 어 요?
이것 은 진정 으로 Redux 와 React 를 연결 합 니 다.이것 은 우리 의 용기 구성 요소 의 바깥쪽 에 포함 되 어 있 습 니 다.이것 은 위의 Provider 가 제공 하 는 store 안의 state 와 dispatch 를 받 아 구조 함수 에 전달 하고 대상 을 되 돌려 주 며 속성 으로 우리 에 게 전달 하 는 용기 구성 요 소 를 받 습 니 다.
그것 의 소스 코드 에 대하 여
connect 는 고급 함수 입 니 다.먼저 mapStateToProps,mapDispatchToProps 를 전송 한 다음 에 Component 를 생산 하 는 함수(wrap Withconnect)를 되 돌려 준 다음 에 진정한 Component 를 매개 변수 로 wrap Withconnect 에 전달 하면 소 포 를 거 친 Connect 구성 요 소 를 생산 합 니 다.이 구성 요 소 는 다음 과 같은 특징 을 가지 고 있 습 니 다.

props.store 를 통 해 조상 Component 의 store 획득

props 는 stateProps,dispatchProps,parentProps 를 포함 하여 합 쳐 nextState 를 얻 고 props 로 서 진정한 Component

에 게 전달 합 니 다.

componentDidMount 시 이벤트 this.store.subscribe(this.handleChange)를 추가 하여 페이지 상호작용 실현

shouldComponentUpdate 시 렌 더 링 을 피하 고 페이지 성능 을 향상 시 키 는 지 판단 하고 nextState

를 얻 습 니 다.

componentWillUnmount 시 등 록 된 이벤트 this.handleChange 제거

connect 의 소스 코드 가 너무 길 기 때문에 우 리 는 주요 논리 만 봅 니 다.

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
 return function wrapWithConnect(WrappedComponent) {
  class Connect extends Component {
   constructor(props, context) {
    //    Component   store
    this.store = props.store || context.store
    this.stateProps = computeStateProps(this.store, props)
    this.dispatchProps = computeDispatchProps(this.store, props)
    this.state = { storeState: null }
    //  stateProps、dispatchProps、parentProps    
    this.updateState()
   }
   shouldComponentUpdate(nextProps, nextState) {
    //     ，        ，Component    
    if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
     this.updateState(nextProps)
      return true
     }
    }
    componentDidMount() {
     //   Component state
     this.store.subscribe(() = {
      this.setState({
       storeState: this.store.getState()
      })
     })
    }
    render() {
     //       Connect
     return (
      <WrappedComponent {...this.nextState} />
     )
    }
   }
   Connect.contextTypes = {
    store: storeShape
   }
   return Connect;
  }
 }

connect 사용 실례
여기 서 우 리 는 카운터 사용 에 관 한 인 스 턴 스 를 씁 니 다.
Component/Counter.js

import React, {Component} from 'react'

class Counter extends Component {
  render() {
    //    props              
    const {increment, decrement, counter} = this.props;
    //    ，      ，    
    return (
      <p>
        Clicked: {counter} times
        {' '}
        <button onClick={increment}>+</button>
        {' '}
        <button onClick={decrement}>-</button>
        {' '}
      </p>
    )
  }
}

export default Counter;

Container/App.js

import { connect } from 'react-redux'
import Counter from '../components/Counter'
import actions from '../actions/counter';

// state.counter   props counter
const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
};
// action        props 
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increment: (...args) => dispatch(actions.increment(...args)),
    decrement: (...args) => dispatch(actions.decrement(...args))
  }
};

//  react-redux   connect        state     actions       props 
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

전체 코드
Github： https://github.com/lipeishang/react-redux-connect-demo
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.