title: Where to store WebRTC streams when building React app with redux
body: <p>I'm building a React.js application that interacts with the WebRTC apis to do audio/video calling. When a call is successfully established, an 'onaddstream' event is fired on the RTCPeerConnection instance, which contains the stream that I as a developer am supposed to connect to a video element to display the remote video to the user.</p>
  
  <p>Problem I'm having is understanding the best way to get the stream from the event to the React component for rendering. I have it successfully working by just dumping the stream into my redux state, but <a href="https://stackoverflow.com/questions/34098125/how-to-divide-the-logic-between-redux-reducers-and-action-creators/34135166#34135166">in this other answer</a>, the creator of redux Dan Abramov mentioned this:</p>
  
  <blockquote>
    <p>[...] don’t use classes inside the state. They are not serializable as is. [...] Just use plain objects and arrays.</p>
  </blockquote>
  
  <p>Which leaves me wondering, if I shouldn't put these streams in the redux state, is there a better way to react to the 'onaddstream' event and get the React component to update without putting the stream in the redux state?</p>