React+Redux音频播放器：如何在Action Creator中正确实例化Howl对象

Got it, let's sort this out the right way—you’re spot-on about avoiding side effects and async logic in reducers. They should stay pure, so moving the Howl instantiation to an action creator makes perfect sense. Here’s a step-by-step refactor example:

First, set up constants for your player actions to keep things consistent:

// actionTypes.js
export const AUDIO_LOAD_START = 'AUDIO_LOAD_START';
export const AUDIO_LOAD_SUCCESS = 'AUDIO_LOAD_SUCCESS';
export const AUDIO_LOAD_ERROR = 'AUDIO_LOAD_ERROR';
export const AUDIO_PLAY = 'AUDIO_PLAY';
// Add other actions like AUDIO_PAUSE, AUDIO_STOP as needed

We’ll use redux-thunk (make sure your store is configured with this middleware!) to handle the async Howl setup and dispatch actions based on its events:

// playerActions.js
import { Howl } from 'howler';
import {
  AUDIO_LOAD_START,
  AUDIO_LOAD_SUCCESS,
  AUDIO_LOAD_ERROR,
  AUDIO_PLAY
} from './actionTypes';

// Thunk action creator to handle audio loading
export const loadAudio = (audioUrl) => (dispatch) => {
  // Dispatch a "loading start" action to update UI state
  dispatch({ type: AUDIO_LOAD_START });

  // Instantiate Howl directly in the action creator
  const sound = new Howl({
    src: [audioUrl],
    // Dispatch success action when audio loads
    onload: () => {
      dispatch({
        type: AUDIO_LOAD_SUCCESS,
        payload: { sound, audioUrl }
      });
    },
    // Dispatch error action if loading fails
    onloaderror: (id, error) => {
      dispatch({
        type: AUDIO_LOAD_ERROR,
        payload: { error, audioUrl }
      });
    },
    // You can hook into other Howl events too
    onplay: () => {
      dispatch({ type: AUDIO_PLAY });
    }
  });

  // Optional: Return the sound instance if you need direct control in components
  return sound;
};

Now your reducer stays pure—only handling plain action objects to update state:

// playerReducer.js
import {
  AUDIO_LOAD_START,
  AUDIO_LOAD_SUCCESS,
  AUDIO_LOAD_ERROR,
  AUDIO_PLAY
} from './actionTypes';

const initialState = {
  isLoading: false,
  soundInstance: null,
  error: null,
  currentAudioUrl: null,
  isPlaying: false
};

const playerReducer = (state = initialState, action) => {
  switch (action.type) {
    case AUDIO_LOAD_START:
      return {
        ...state,
        isLoading: true,
        error: null // Clear previous errors
      };
    case AUDIO_LOAD_SUCCESS:
      return {
        ...state,
        isLoading: false,
        soundInstance: action.payload.sound,
        currentAudioUrl: action.payload.audioUrl
      };
    case AUDIO_LOAD_ERROR:
      return {
        ...state,
        isLoading: false,
        error: action.payload.error,
        currentAudioUrl: action.payload.audioUrl
      };
    case AUDIO_PLAY:
      return {
        ...state,
        isPlaying: true
      };
    // Add cases for pause, stop, etc. here
    default:
      return state;
  }
};

export default playerReducer;

Connect the action to your component using Redux hooks:

// AudioPlayer.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadAudio } from './playerActions';

const AudioPlayer = ({ audioUrl }) => {
  const dispatch = useDispatch();
  const { isLoading, soundInstance, error, isPlaying } = useSelector(state => state.player);

  // Load audio when the URL changes
  useEffect(() => {
    if (audioUrl) {
      dispatch(loadAudio(audioUrl));
    }

    // Cleanup: Unload the sound to prevent memory leaks
    return () => {
      if (soundInstance) {
        soundInstance.unload();
      }
    };
  }, [audioUrl, dispatch, soundInstance]);

  if (isLoading) return <div>Loading audio...</div>;
  if (error) return <div>Oops, failed to load audio: {error.message}</div>;

  return (
    <div className="audio-player">
      <button onClick={() => soundInstance.play()}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
};

export default AudioPlayer;

• Redux-Thunk Requirement: This setup relies on redux-thunk to let action creators return functions (instead of just plain objects). Make sure your store is configured with it:

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import playerReducer from './playerReducer';
  
  const store = createStore(playerReducer, applyMiddleware(thunk));
  

• Cleanup: Always unload the Howl instance when the component unmounts or the audio URL changes to avoid memory leaks.
• Separation of Concerns: Now reducers handle state updates, action creators handle side effects and async logic, and components just dispatch actions and render based on state.

内容的提问来源于stack exchange，提问作者user12291772