redux Provider Connect源码简易实现

provider.js

import React from 'react'
import PropTypes from "prop-types"
class Provider extends Component {
  constructor(props) {
    super(props)

    const { store } = props

    this.state = {
      storeState: store.getState(),
      store
    }
  }

  componentDidMount() {
    this._isMounted = true
    this.subscribe()
  }

  componentWillUnmount() {
    if (this.unsubscribe) this.unsubscribe()

    this._isMounted = false
  }

  componentDidUpdate(prevProps) {
    if (this.props.store !== prevProps.store) {
      if (this.unsubscribe) this.unsubscribe()

      this.subscribe()
    }
  }

  subscribe() {
    const { store } = this.props

    this.unsubscribe = store.subscribe(() => {
      const newStoreState = store.getState()

      if (!this._isMounted) {
        return
      }

      this.setState(providerState => {
        // If the value is the same, skip the unnecessary state update.
        if (providerState.storeState === newStoreState) {
          return null
        }

        return { storeState: newStoreState }
      })
    })

    // Actions might have been dispatched between render and mount - handle those
    const postMountStoreState = store.getState()
    if (postMountStoreState !== this.state.storeState) {
      this.setState({ storeState: postMountStoreState })
    }
  }

  render() {
    const Context = this.props.context || ReactReduxContext

    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    )
  }
}

connect.js
import React from 'react'
import PropTypes from 'prop-types'
const connect=(mapStateToProps,mapDispatchToProps)=>WrapperCom=>{
    return class Connect extends React.Component{
        static contextTypes={
            store:PropTypes.object
        }

        constructor(props,context){
            super(props)
            this.state={
                allProps:{}
            }
        }
        componentWillMount(){
            const {store}=this.context
            let stateProps=mapStateToProps?mapStateToProps(store.getState(),this.props):{}
            let dispatchProps=mapDispatchToProps?mapDispatchToProps(store.dispatch,this.props):{}
            this.setState({
                allProps:{
                    ...this.props,
                    ...dispatchProps,
                    ...stateProps
                }
            })
        }
        render(){
            return <WrapperCom {...this.state.allProps}/>
        }
    } 
}
export default connect