Continuation of #698 - Redux time travel

@tmeasday,

I went back and played around with time travel a bit. What seems to be popping out of the blue when I reset my store are APOLLO_QUERY_STOP actions. I’m not sure if these should be happening or not. Maybe you can shed some light on this?

Nevertheless, I’m realizing that time traveling a react-apollo app isn’t really possible because data from the graphql higher order component gets called on componentDidMount. This means that as you try to reproduce each step, once you get to the step that would mount the GraphQL connected component, the queries are going to fire off, thus overlapping with the next actions one would manually dispatch while time traveling.

It’s definitely possible to reduce the state from all the actions though. 😄

EDIT: Starts where this comment left off.

[zalmoxisus]

@migueloller, I’ve just published redux-devtools-instrument@1.2 and remote-redux-devtools@0.4.9, which support this feature. We still need to update the UI (add a button) on remotedev-app (and the extension), however you can get it work just by calling in your app:

store.liftedStore.dispatch({ type: 'LOCK_CHANGES', status: true });

To unlock changes:

store.liftedStore.dispatch({ type: 'LOCK_CHANGES', status: false });

Please let me know whether it helps.

[zalmoxisus]

@tmeasday, thinking over, I don’t think we should force users to add redux-thunk middleware, better to execute side effects right from (new ApolloClient()).middleware() for specific action types:

function clientMiddleware(store) {
  return next => action => {
    const result = next(action);
    // ...
    if (action.type === 'SUBSCRIBE_REQUEST') {
      // network requests or other sideffects
      // here we can dispatch also: next({ type: 'SUBSCRIBE_SUCCESS' })
      // or: next({ type: 'SUBSCRIBE_FAILED' })
    } else if (action.type === 'TEARDOWN_REQUEST') {
      // network requests or other sideffects
    }
    return result;
  };
}

And from the component:

  componentDidMount() {
    this.props.dispatch({ type: 'SUBSCRIBE_REQUEST' });
  }
  componentWillUnmount() {
    this.props.dispatch({ type: 'TEARDOWN_REQUEST' });
  }