fix: connect do not update issue, close #202

vueComponent · Sep 29, 2018 · 213706c · 213706c
1 parent f597b7e
commit 213706c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/components/_util/proxyComponent.jsx b/components/_util/proxyComponent.jsx
@@ -9,7 +9,7 @@ export default function wrapWithConnect (WrappedComponent) {
   const tempProps = WrappedComponent.props || {}
   const methods = WrappedComponent.methods || {}
   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.children = PropTypes.array.def([])
   const ProxyWrappedComponent = {
@@ -22,19 +22,24 @@ export default function wrapWithConnect (WrappedComponent) {
       },
     },
     render () {
-      const { $listeners, $slots = {}, $attrs } = this
+      const { $listeners, $slots = {}, $attrs, $scopedSlots } = this
       const props = getOptionProps(this)
       const wrapProps = {
         props: {
           ...props,
           __propsSymbol__: Symbol(),
-          children: $slots.default || [],
+          children: $slots.default || props.children || [],
         },
         on: $listeners,
         attrs: $attrs,
+        scopedSlots: $scopedSlots,
       }
       return (
-        <WrappedComponent {...wrapProps} ref='wrappedInstance'/>
+        <WrappedComponent {...wrapProps} ref='wrappedInstance'>
+          {Object.keys($slots).map(name => {
+            return <template slot={name}>{$slots[name]}</template>
+          })}
+        </WrappedComponent>
       )
     },
   }

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