fix: connect do not update issue, close #202

pull/225/head
tangjinzhou 2018-09-29 15:07:37 +08:00
parent f597b7ece3
commit 213706c185
2 changed files with 20 additions and 8 deletions

View File

@ -9,7 +9,7 @@ export default function wrapWithConnect (WrappedComponent) {
const tempProps = WrappedComponent.props || {} const tempProps = WrappedComponent.props || {}
const methods = WrappedComponent.methods || {} const methods = WrappedComponent.methods || {}
const props = {} const props = {}
Object.keys(tempProps).forEach(k => { props[k] = PropTypes.any }) Object.keys(tempProps).forEach(k => { props[k] = ({ ...k, required: false }) })
WrappedComponent.props.__propsSymbol__ = PropTypes.any WrappedComponent.props.__propsSymbol__ = PropTypes.any
WrappedComponent.props.children = PropTypes.array.def([]) WrappedComponent.props.children = PropTypes.array.def([])
const ProxyWrappedComponent = { const ProxyWrappedComponent = {
@ -22,19 +22,24 @@ export default function wrapWithConnect (WrappedComponent) {
}, },
}, },
render () { render () {
const { $listeners, $slots = {}, $attrs } = this const { $listeners, $slots = {}, $attrs, $scopedSlots } = this
const props = getOptionProps(this) const props = getOptionProps(this)
const wrapProps = { const wrapProps = {
props: { props: {
...props, ...props,
__propsSymbol__: Symbol(), __propsSymbol__: Symbol(),
children: $slots.default || [], children: $slots.default || props.children || [],
}, },
on: $listeners, on: $listeners,
attrs: $attrs, attrs: $attrs,
scopedSlots: $scopedSlots,
} }
return ( return (
<WrappedComponent {...wrapProps} ref='wrappedInstance'/> <WrappedComponent {...wrapProps} ref='wrappedInstance'>
{Object.keys($slots).map(name => {
return <template slot={name}>{$slots[name]}</template>
})}
</WrappedComponent>
) )
}, },
} }

View File

@ -2,6 +2,7 @@ import shallowEqual from 'shallowequal'
import omit from 'omit.js' import omit from 'omit.js'
import { getOptionProps } from '../props-util' import { getOptionProps } from '../props-util'
import PropTypes from '../vue-types' import PropTypes from '../vue-types'
import proxyComponent from '../proxyComponent'
function getDisplayName (WrappedComponent) { function getDisplayName (WrappedComponent) {
return WrappedComponent.name || 'Component' return WrappedComponent.name || 'Component'
@ -13,8 +14,10 @@ export default function connect (mapStateToProps) {
const finnalMapStateToProps = mapStateToProps || defaultMapStateToProps const finnalMapStateToProps = mapStateToProps || defaultMapStateToProps
return function wrapWithConnect (WrappedComponent) { return function wrapWithConnect (WrappedComponent) {
const tempProps = omit(WrappedComponent.props || {}, ['store']) const tempProps = omit(WrappedComponent.props || {}, ['store'])
const props = {} const props = {
Object.keys(tempProps).forEach(k => { props[k] = PropTypes.any }) __propsSymbol__: PropTypes.any,
}
Object.keys(tempProps).forEach(k => { props[k] = ({ ...k, required: false }) })
const Connect = { const Connect = {
name: `Connect_${getDisplayName(WrappedComponent)}`, name: `Connect_${getDisplayName(WrappedComponent)}`,
props, props,
@ -28,7 +31,11 @@ export default function connect (mapStateToProps) {
} }
}, },
watch: { watch: {
__propsSymbol__ () {
if (mapStateToProps && mapStateToProps.length === 2) {
this.subscribed = finnalMapStateToProps(this.store.getState(), this.$props)
}
},
}, },
mounted () { mounted () {
this.trySubscribe() this.trySubscribe()
@ -88,6 +95,6 @@ export default function connect (mapStateToProps) {
) )
}, },
} }
return Connect return proxyComponent(Connect)
} }
} }