Allow connectToStore components to use props in getStores

goatslacker · May 14, 2015 · 7003703 · 7003703
1 parent 3ac1f75
commit 7003703
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/utils/connectToStores.js b/src/utils/connectToStores.js
@@ -10,7 +10,7 @@
  *
  *    const MyComponent = React.createClass({
  *      statics: {
- *        getStores() {
+ *        getStores(props) {
  *          return [myStore]
  *        },
  *        getPropsFromStores(props) {
@@ -27,7 +27,7 @@
  * Example using ES6 Class:
  *
  *    class MyComponent extends React.Component {
- *      static getStores() {
+ *      static getStores(props) {
  *        return [myStore]
  *      }
  *      static getPropsFromStores(props) {
@@ -55,22 +55,21 @@ function connectToStores(Component) {
     throw new Error('connectToStores() expects the wrapped component to have a static getPropsFromStores() method')
   }
 
-  // Cache stores.
-  const stores = Component.getStores()
-
   // Wrapper Component.
   const StoreConnection = React.createClass({
     getInitialState() {
       return Component.getPropsFromStores(this.props)
     },
 
     componentDidMount() {
+      const stores = Component.getStores(this.props)
       stores.forEach((store) => {
         store.listen(this.onChange)
       })
     },
 
     componentWillUnmount() {
+      const stores = Component.getStores(this.props)
       stores.forEach((store) => {
         store.unlisten(this.onChange)
       })

diff --git a/test/connect-to-stores-test.js b/test/connect-to-stores-test.js
@@ -109,6 +109,27 @@ export default {
       assert.include(output, 'Foo: Bar')
     },
 
+    'component can get use stores from props'() {
+      const LegacyComponent = React.createClass({
+        statics: {
+          getStores(props) {
+            return [props.store]
+          },
+          getPropsFromStores(props) {
+            return props.store.getState()
+          }
+        },
+        render() {
+          return React.createElement('div', null, `Foo${this.props.delim}${this.props.foo}`)
+        }
+      })
+
+      const WrappedComponent = connectToStores(LegacyComponent)
+      const element = React.createElement(WrappedComponent, {delim: ': ', store: testStore})
+      const output = React.renderToStaticMarkup(element)
+      assert.include(output, 'Foo: Bar')
+    },
+
     'ES6 class component responds to store events'() {
       class ClassComponent extends React.Component {
         static getStores() {