Search code examples
reduxredux-thunk

Redux - time travel for side effect such as service connection


I'm using redux-thunk and starting to see some limitations.

Suppose I have actions PUSHER_CONNECT, PUSHER_CONNECTED, PUSHER_DISCONNECTED, PUSHER_LISTEN_TO_CHANNEL, PUSHER_MESSAGE_RECEIVED, etc. The state would have something simple that indicates the connection status.

{ connection: 'connected' } // OR
{ connection: 'disconnected' }

How would I be able to truly travel back and forth between these 2: PUSHER_CONNECTED, PUSHER_DISCONNECTED since the pusher connection is still living somewhere. I was thinking of keeping the pusher object and related objects in the state and if it's PUSHER_DISCONNECTED, set them to null. But there's no guarantee those objects are immutable.

Another thought is that, I would add a check for PUSHER_MESSAGE_RECEIVED: if state.connection !== 'connected' then don't push the new message... simulating that it's a "real" disconnection. Similarly, add a check for PUSHER_CONNECT, if the pusher object is there and connected, don't re-connect but just change the state to {connection: 'connecting'}

How would you approach this?


Solution

  • You can subscribe to the store and manage something like a “two way binding”.

    In the listener, check the status, and if it contradicts the store state, execute the necessary effects. Be careful not to get into an infinite loop there.

    This is the approach https://github.com/reactjs/react-router-redux takes for synchronizing the URL bar on time travel.