FluxMixin: sync with stores when props change

src/addons/FluxMixin.js

@@ -33,7 +33,7 @@
 import { PropTypes } from 'react';
 import { Flux } from '../Flux';
 import assign from 'object-assign';
-
+import shallowEqual from 'react/lib/shallowEqual';
 
 export default function FluxMixin(...args) {
 
@@ -54,7 +54,9 @@ export default function FluxMixin(...args) {
     },
 
     getInitialState() {
+      this._flux_stateGetters = {};
       this._flux_listeners = {};
+      this._flux_didSyncStoreState = false;
       this.flux = this.props.flux || this.context.flux;
 
       if (!(this.flux instanceof Flux)) {
@@ -81,6 +83,32 @@ export default function FluxMixin(...args) {
       }
     },
 
+    componentDidUpdate(prevProps) {
+      if (!shallowEqual(prevProps, this.props)) {
+        this.updateStores();
+      }
+    },
+
+    updateStores() {
+      let state = this.getStoreState();
+      this.setState(state);
+    },
+
+    getStoreState() {
+      let state = {};
+
+      for (let key in this._flux_stateGetters) {
+        let storeStateGetter = this._flux_stateGetters[key];
+        let store = this.flux.getStore(key);
+
+        let storeState = storeStateGetter(store);
+
+        assign(state, storeState);
+      }
+
+      return state;
+    },
+
     /**
      * Connect component to stores, get the combined initial state, and
      * subscribe to future changes. There are three ways to call it. The
@@ -134,6 +162,7 @@ export default function FluxMixin(...args) {
         if (storeStateGetter === null) storeStateGetter = defaultStateGetter;
 
         storeStateGetter = storeStateGetter.bind(this);
+        this._flux_stateGetters[key] = storeStateGetter;
 
         let initialStoreState = storeStateGetter(store);
 
@@ -143,10 +172,7 @@ export default function FluxMixin(...args) {
         };
 
         store.addListener('change', listener);
-
-        assign(this._flux_listeners, {
-          [key]: listener,
-        });
+        this._flux_listeners[key] = listener;
 
         assign(initialState, initialStoreState);
       }

src/addons/__tests__/FluxMixin-test.js

@@ -39,6 +39,7 @@ describe('FluxMixin', () => {
 
       this.createActions('test', TestActions);
       this.createStore('test', TestStore, this);
+      this.createStore('test2', TestStore, this);
     }
   }
 
@@ -264,6 +265,34 @@ describe('FluxMixin', () => {
       expect(someComponentMethod.firstCall.args[0]).to.equal('some arg');
     });
 
+    it('syncs with store after prop change', () => {
+      let flux = new Flux();
+
+      let Component = React.createClass({
+        mixins: [FluxMixin({
+          test: function(store) {
+            return {
+              foo: 'foo is ' + this.props.foo,
+            };
+          },
+        })],
+
+        render() {
+          return null;
+        }
+      });
+
+      let component = TestUtils.renderIntoDocument(
+        <Component flux={flux} foo="bar" />
+      );
+
+      expect(component.state.foo).to.equal('foo is bar');
+
+      component.setProps({ foo: 'baz' });
+
+      expect(component.state.foo).to.equal('foo is baz');
+    });
+
     it('accepts object of keys to state getters', () => {
       let flux = new Flux();
 
@@ -340,4 +369,30 @@ describe('FluxMixin', () => {
 
   });
 
+  describe('#getStoreState', () => {
+    it('gets combined state of connected stores', () => {
+      let flux = new Flux();
+
+      let component = TestUtils.renderIntoDocument(
+        <PropsComponent flux={flux} />
+      );
+
+      component.connectToStores({
+        test: store => ({
+          foo: 'bar',
+        }),
+        test2: store => ({
+          bar: 'baz'
+        })
+      });
+
+      component.setState({ baz: 'foo' });
+
+      expect(component.getStoreState()).to.deep.equal({
+        foo: 'bar',
+        bar: 'baz'
+      });
+    });
+  });
+
 });