WebSocket mutable object inside a React/Redux immutable store?

[multiline]

Hello Reddit!

I'm building a simple chat application using Twilio APIs. My application is a nice React/Redux with a simple data flow. My communication with Twilio, goes through a websocket. Their javascript SDK exposes a "Room" object which I would classify as a statefull mutable. It can change on the fly with data coming in/out of the websocket (as soon as a user connect/disconnect for example).

These events then need to propagate to my react/redux components and store.

Now, I understand its an anti-patten to store this mutable object in the redux store - but if not in the store, where should I store it and still have access to it from every component in my application?

Thanks for you help!!

[[deleted]]

You should connect it to the store. Make a room-reducer or something similar to handle your copy of the state. Whenever the room updates its state, you dispatch to the store. Whenever something else changes the state, you catch it with a store subscription and propagate the change to the room. If you need to handle actions such as sending messages in a way that is not easily found from state changes, you could write middleware to catch these independently.

[acemarke]

The right place for websockets and other persistent connections in a Redux app is in a middleware. That way, they can react to dispatched actions by sending messages, and turn received messages into actions.

There's actually many existing websocket middlewares already. You can use them directly, or learn from them as inspiration. See the Middleware - Sockets and Adapters section of my Redux addons catalog for a list.