title: Working with Audio objects in React/ Redux
body: <p>I'm currently building a music app and have a question on the correct way to approach audio objects in terms of storing them and their current state in React/ Redux. </p>
  
  <p>I'm currently dispatching an action in one of my components that's going to the following reducer to set an audio object as part of the state:</p>
  
  <p><strong>Reducer.js</strong></p>
  
  <pre><code>import { fromJS } from 'immutable';
  
  const initialState = fromJS({
    audioTrack: false
  });
  
  export const musicPlayer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case 'musicPlayer/PLAY_TRACK': {
        const mergeObj = {};
        const audioTrack = state.get('audioTrack');
        mergeObj.audioTrack = audioTrack;
        if (!audioTrack) {
          mergeObj.audioTrack = new Audio('../../public/music/test.mp3');
          mergeObj.audioTrack.play();
        } else if (state.get('audioTrack').paused) {
          mergeObj.audioTrack.play();
        } else {
          mergeObj.audioTrack.pause();
        }
        return state.merge(mergeObj);
      }
      default: return state
    }
  }
  </code></pre>
  
  <p>Basically here if <code>audioTrack</code> is <code>false</code> i'm creating a new audio track when someone clicks a play button. I'm then adding the <code>audioTrack</code> object to the reducers state. From there if the track is set then I can access the <code>audioTrack</code> object from the reducers state and pause it if I need to as well as call whatever other audio methods I need to. </p>
  
  <p>My issue here is that i'm pretty sure storing the audio object in a reducer is not the correct way to approach something like this. The audio object has some deep nested objects and I would like to keep my reducers as flat as possible for obvious performance reasons. </p>
  
  <p>What would be a better way to approach this? I've though of adding the audio object to the window object and just store its' state there but again not sure if this is the most reasonable approach. Would like to keep any audio elements out of the dom to prevent users from doing a quick inspect element and find the node along with its' source.</p>
  
  <p>Thanks and please let me know if anythings unclear!</p>