Skip to content

createConnect, with configurable shallowEqual #182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

createConnect, with configurable shallowEqual #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 2 additions & 236 deletions src/components/connect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,238 +1,4 @@
import React, { Component } from 'react'
import storeShape from '../utils/storeShape'
import shallowEqual from '../utils/shallowEqual'
import isPlainObject from '../utils/isPlainObject'
import wrapActionCreators from '../utils/wrapActionCreators'
import hoistStatics from 'hoist-non-react-statics'
import invariant from 'invariant'
import createConnect from './createConnect'

const defaultMapStateToProps = () => ({})
const defaultMapDispatchToProps = dispatch => ({ dispatch })
const defaultMergeProps = (stateProps, dispatchProps, parentProps) => ({
...parentProps,
...stateProps,
...dispatchProps
})

function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

// Helps track hot reloading.
let nextVersion = 0

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
const shouldSubscribe = Boolean(mapStateToProps)
const finalMapStateToProps = mapStateToProps || defaultMapStateToProps
const finalMapDispatchToProps = isPlainObject(mapDispatchToProps) ?
wrapActionCreators(mapDispatchToProps) :
mapDispatchToProps || defaultMapDispatchToProps
const finalMergeProps = mergeProps || defaultMergeProps
const shouldUpdateStateProps = finalMapStateToProps.length > 1
const shouldUpdateDispatchProps = finalMapDispatchToProps.length > 1
const { pure = true, withRef = false } = options

// Helps track hot reloading.
const version = nextVersion++

function computeStateProps(store, props) {
const state = store.getState()
const stateProps = shouldUpdateStateProps ?
finalMapStateToProps(state, props) :
finalMapStateToProps(state)

invariant(
isPlainObject(stateProps),
'`mapStateToProps` must return an object. Instead received %s.',
stateProps
)
return stateProps
}

function computeDispatchProps(store, props) {
const { dispatch } = store
const dispatchProps = shouldUpdateDispatchProps ?
finalMapDispatchToProps(dispatch, props) :
finalMapDispatchToProps(dispatch)

invariant(
isPlainObject(dispatchProps),
'`mapDispatchToProps` must return an object. Instead received %s.',
dispatchProps
)
return dispatchProps
}

function computeNextState(stateProps, dispatchProps, parentProps) {
const mergedProps = finalMergeProps(stateProps, dispatchProps, parentProps)
invariant(
isPlainObject(mergedProps),
'`mergeProps` must return an object. Instead received %s.',
mergedProps
)
return mergedProps
}

return function wrapWithConnect(WrappedComponent) {
class Connect extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (!pure) {
this.updateStateProps(nextProps)
this.updateDispatchProps(nextProps)
this.updateState(nextProps)
return true
}

const storeChanged = nextState.storeState !== this.state.storeState
const propsChanged = !shallowEqual(nextProps, this.props)
let mapStateProducedChange = false
let dispatchPropsChanged = false

if (storeChanged || (propsChanged && shouldUpdateStateProps)) {
mapStateProducedChange = this.updateStateProps(nextProps)
}

if (propsChanged && shouldUpdateDispatchProps) {
dispatchPropsChanged = this.updateDispatchProps(nextProps)
}

if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
this.updateState(nextProps)
return true
}

return false
}

constructor(props, context) {
super(props, context)
this.version = version
this.store = props.store || context.store

invariant(this.store,
`Could not find "store" in either the context or ` +
`props of "${this.constructor.displayName}". ` +
`Either wrap the root component in a <Provider>, ` +
`or explicitly pass "store" as a prop to "${this.constructor.displayName}".`
)

this.stateProps = computeStateProps(this.store, props)
this.dispatchProps = computeDispatchProps(this.store, props)
this.state = { storeState: null }
this.updateState()
}

computeNextState(props = this.props) {
return computeNextState(
this.stateProps,
this.dispatchProps,
props
)
}

updateStateProps(props = this.props) {
const nextStateProps = computeStateProps(this.store, props)
if (shallowEqual(nextStateProps, this.stateProps)) {
return false
}

this.stateProps = nextStateProps
return true
}

updateDispatchProps(props = this.props) {
const nextDispatchProps = computeDispatchProps(this.store, props)
if (shallowEqual(nextDispatchProps, this.dispatchProps)) {
return false
}

this.dispatchProps = nextDispatchProps
return true
}

updateState(props = this.props) {
this.nextState = this.computeNextState(props)
}

isSubscribed() {
return typeof this.unsubscribe === 'function'
}

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

tryUnsubscribe() {
if (this.unsubscribe) {
this.unsubscribe()
this.unsubscribe = null
}
}

componentDidMount() {
this.trySubscribe()
}

componentWillUnmount() {
this.tryUnsubscribe()
}

handleChange() {
if (!this.unsubscribe) {
return
}

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

getWrappedInstance() {
invariant(withRef,
`To access the wrapped instance, you need to specify ` +
`{ withRef: true } as the fourth argument of the connect() call.`
)

return this.refs.wrappedInstance
}

render() {
const ref = withRef ? 'wrappedInstance' : null
return (
<WrappedComponent {...this.nextState} ref={ref} />
)
}
}

Connect.displayName = `Connect(${getDisplayName(WrappedComponent)})`
Connect.WrappedComponent = WrappedComponent
Connect.contextTypes = {
store: storeShape
}
Connect.propTypes = {
store: storeShape
}

if (process.env.NODE_ENV !== 'production') {
Connect.prototype.componentWillUpdate = function componentWillUpdate() {
if (this.version === version) {
return
}

// We are hot reloading!
this.version = version

// Update the state and bindings.
this.trySubscribe()
this.updateStateProps()
this.updateDispatchProps()
this.updateState()
}
}

return hoistStatics(Connect, WrappedComponent)
}
}
export default createConnect(shallowEqual)
Loading