use up to date props on state change (#70)

Changelog.md

@@ -2,6 +2,10 @@
 
 Expect active development and potentially significant breaking changes in the `0.x` track. We'll try to be diligent about releasing a `1.0` version in a timely fashion (ideally within 1 or 2 months), so that we can take advantage of SemVer to signify breaking changes from that point on.
 
+### v.0.3.8
+
+Bug: Don't use old props on store change change
+
 ### v.0.3.7
 
 Bug: Reset loading state when a refetched query has returned

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apollo",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "React data container for Apollo Client",
   "main": "index.js",
   "scripts": {

src/connect.tsx

@@ -199,10 +199,11 @@ export default function connect(opts?: ConnectOptions) {
       }
 
       bindStoreUpdates(): void {
-        const { store, props } = this;
+        const { store } = this;
         const { reduxRootKey } = this.client;
 
         this.unsubscribeFromStore = store.subscribe(() => {
+          const { props } = this;
           let newState = assign({}, store.getState());
           let oldState = assign({}, this.previousState);
 

test/connect/queries.tsx

@@ -469,6 +469,76 @@ describe('queries', () => {
 
   });
 
+  // taken from https://gist.github.com/sgoll/8519d638feb9489242f517cf954e4681
+  it('doesn\'t rebuild the queries on dispatch if nothing has changed', () => {
+
+    const demoAction = () => ({
+      type: 'DEMO_ACTION',
+    });
+
+    const demoReducer = (state = 0, action) => (
+      action.type === 'DEMO_ACTION' ? state + 1 : state
+    );
+
+    const DemoComponent = () => null;
+
+    // whenever mapQueriesToProps is called, we extract ownProps for test
+    let gotProps;
+
+    const mapQueriesToProps = ({ ownProps }) => {
+      gotProps = ownProps;
+      // not necessary to actually set up any queries
+      return {};
+    };
+
+
+    // wrap dummy component into connect'd container
+    const DemoContainer = connect({ mapQueriesToProps })(
+      DemoComponent
+    );
+
+
+    // initialize Apollo client and integrate into Redux store
+    const client = new ApolloClient();
+
+    // Typscript workaround
+    const apolloReducer = client.reducer() as () => any;
+
+    const store = createStore(
+      combineReducers({
+        demo: demoReducer,
+        apollo: apolloReducer,
+      }),
+      applyMiddleware(client.middleware())
+    );
+
+
+    // simple root container that forwards props (changed with setProps
+    // below) to demo component
+    const Root = (props) => (
+      <ProviderMock client={client} store={store}>
+        <DemoContainer {...props} />
+      </ProviderMock>
+    );
+
+
+    // on initial render, we expect mapQueriesToProps to be called with
+    // passed prop value "foo"
+    const wrapper = mount(<Root value='foo' />);
+    expect(gotProps.value).to.equal('foo');
+
+    // now we change prop value to "bar", expect mapQueriesToProps call
+    // with updated prop value "bar"
+    wrapper.setProps({ value: 'bar' });
+    expect(gotProps.value).to.equal('bar');
+
+    // running an arbitrary action that changes the store state should
+    // not update the prop value passed to mapQueriesToProps
+    client.store.dispatch(demoAction() as any);
+    expect(gotProps.value).to.equal('bar');
+
+  });
+
   it('rebuilds the queries on prop change', (done) => {
     const query = gql`
       query people {