Работа с аудиообъектами в React / Redux

Не храните его в состоянии redux.

1. Весь аудиообъект представляет собой информацию избыточный (имя / путь к файлу, состояние воспроизведения / паузы, достаточно информации о текущем времени).
2. Redux и неизменяемый подход не совсем подходят для этого типа объектов с точки зрения производительности.
3. И этот тип объектов не подходит для работы с redux dev tools / logger / человеческими глазами.

Вы должны хранить минимальный объем информации об аудио. Итак, любой компонент может подписаться на это состояние. Например, создайте экземпляр аудиообъекта на componentDidMount и сохраните его в локальном состоянии, переключите аудио на getDerivedStateFromProps/componentWillReceiveProps, уничтожьте аудиообъект на componentWillUnmount и т. д.

Кроме того, если вы хотите скрыть информацию об аудио, это еще одна причина использовать локальное состояние компонента.

У меня была такая же проблема, и вот как я это сделал: сначала создайте аудиокомпонент вот так

import CSSModules from 'react-css-modules'
import React, { PureComponent } from 'react'
import styles from '../../app.sass'
import isUndefined from 'lodash/isUndefined'
import {connect} from "react-redux"
import {setActiveTrack} from "../../containers/Audio/actions";


class Audio extends PureComponent {
  constructor (props) {
    super(props)
    const { src, controlsList, preload, controls, autoPlay } = props
    this.state = {
      src: src,
      controlsList: isUndefined(controlsList) ? 'nodownload' : controlsList,
      preload: isUndefined(preload) ? 'none' : preload,
      controls: isUndefined(controls) ? true : controls,
      autoPlay: isUndefined(autoPlay) ? false : autoPlay,
    }
  }

  setActiveTrackHandler = () => {
    const { dispatch, uid } =this.props
    dispatch(setActiveTrack(uid))
  }


  render () {
    const {uid, audioTrack} =this.props
    if (this.audioRef && uid !== audioTrack) {
      this.audioRef.pause()
    }
    return (
      <audio
        ref = {audio => this.audioRef = audio}
        controls = {this.state.controls}
        preload = {this.state.preload}
        autoPlay = {this.state.autoPlay}
        style = {{ width: '100%' }}
        controlsList = {this.state.controlsList}
        onPlay = {this.setActiveTrackHandler}
      >
        <source src = {this.state.src} />
      </audio>
    )
  }

}


function mapStateToProps (state){
  return {
    audioTrack: state.audioReducer.audioTrack
  }
}

const AudioClass = CSSModules(Audio,styles, { allowMultiple: true })
export default connect(mapStateToProps)(AudioClass)

Тогда вот ваши константы

export const SET_ACTIVE_TRACK = 'containers/Audio/SET_ACTIVE_TRACK'

А вот и ваши действия

import {
  SET_ACTIVE_TRACK,
  PLAY_TRACK
} from './constants'

// sets active track
export function setActiveTrack (activeTrack) {
  return {
    type: SET_ACTIVE_TRACK,
    payload: activeTrack
  }

}

а вот и редуктор

import {
  SET_ACTIVE_TRACK
} from './constants'



const initialState = {
  audioTrack: null,
  isPlaying: false,
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {

  case SET_ACTIVE_TRACK:
    return {
      ...state,
      audioTrack: action.payload,
    }

  default: return state
  }
}

export default reducer