managing webRTC state (streams) in a react/redux app

Question

I'm developing a video chat app with react and using redux for state management. Currently using agora for webRTC. As webRTC related events happen (streams get added, removed, and a whole lot more), the state should be updated and sent to all the components that need/depend on it.

However, redux alone is not meant for this. As discussed in this SO question, and by Dan Abramov (the maker himself), redux is not meant for classes, therefore storing webRTC streams there is a bad idea.

I suppose that I should have my own webRTC state stored and managed manually (somewhere, idk where

Still, I'm having a hard time understanding how to store the webRTC streams myself:

1. I believe using context API will cause all my components to render every time a stream changes/is added/is removed/anything else related happens.
2. Managing the webRTC state on a react function component will quickly become a nightmare, as I'll have to do it at the top level, and pass it down almost everywhere.
3. redux-saga is mentioned as a potential savior, but I'm kind of new to this and it's unclear to me how this can help as it seems to mainly handle side-effects and async calls. I need a parallel store (AFAI Understand)

bottom line:

Can someone please give a good and detailed explanation or point me to a repo with code that does this well?

Answer 1

I found a good base example code in the redux-saga documentation that manages events from a websocket - which is not too different than events from a webRTC client.

https://redux-saga.js.org/docs/advanced/Channels.html