Почему ended отрабатывает несколько раз?

Question

[Speakermen]

Доброго времени суток уважаемые разработчики в компоненте Control.js addEventListener отрабатывает с событием ended несколько раз и перескакивает через несколько треков( Только почему по клику всё нормально отрабатывает

player.addEventListener('ended', () => dispatch(nextAudio()));

Использовал redux toolkit


Компоненты не зависимы друг от друга берут из stora, а не из параметров функции

stackblitz react player

Ну и в Reducerе баг из того что логика в playAudio зашла в тупик initialState id = 1 и срабатывает Reducer pauseAudio state.track.id == action.payload при первом запуске если не нажат не один элемент

//slices/playlistSlice.js

import { createSlice } from '@reduxjs/toolkit';
import TrackService from './../services/TrackService.js';

const initialState = {
  id: 1,
  trackService: new TrackService(),
  tracks: new TrackService().findAll(),
  track: new TrackService().findOne(0),
  flag: false,
  audio: new Audio(),
};

const playlistSlice = createSlice({
  name: 'playlist',
  initialState,
  reducers: {
    playAudio: (state, action) => {
      console.log(state.id, state.track.id, action.payload);
      if (state.track.id !== action.payload) {
        state.flag = true;
        state.id = action.payload;
        state.track = state.trackService.findOne(state.id - 1);
        state.audio.src = state.track.audioPath;
        state.audio.play();
        console.log('playAudio');
      } else {
        playlistSlice.caseReducers.pauseAudio(state);
      }
    },
    pauseAudio: (state) => {
      if (state.flag) {
        state.flag = false;
        state.audio.pause();
        console.log('pauseAudio');
      } else {
        state.flag = true;
        state.audio.play();
        console.log('playAudio pause');
      }
    },
    nextAudio: (state) => {
      state.id++;

      if (state.id > state.tracks.length) {
        state.id = 1;
      }

      playlistSlice.caseReducers.playAudio(state, { payload: state.id });
      console.log('nextAudio');
    },
    prevAudio: (state) => {
      state.id--;

      if (state.id < 1) {
        state.id = state.tracks.length;
      }

      playlistSlice.caseReducers.playAudio(state, { payload: state.id });
      console.log('prevAudio');
    },
  },
});

export const { playAudio, pauseAudio, nextAudio, prevAudio } =
  playlistSlice.actions;
export default playlistSlice.reducer;

Comments

[Speakermen]

Может как-то кэшировать? How can I memoize a variable derived from redux us...

import {createSelector} from '@reduxjs/toolkit';

export const selectRawTranscript = createSelector(
  (state: RootState) => state.data.someRawValue,
  (rawValue) => rawValue.map(entry => entry.data)
);

[Kentavr16]

Speakermen, Особо не разбирал код, т.к. он не работает в песочнице. Из того что увидел - думаю проблема в том что ты добавляешь прослушиватель просто в коде и нигде его не очищаешь. Если учесть что компонент может рендериться несколько раз, особенно в режиме разработки, то и прослушивателей может навеситься несколько. Используй для этого хук эффекта , в котором укажи что при размонтировании компонента нужно удалить слушатель события.

[Kentavr16]

Может как-то кэшировать?

Без хорошего понимания работы реакта мало смысла кешировать что-то неизвестно зачем. Мемоизация вообще хрупкая штука

[Speakermen]

Kentavr16, спасибо я вносил изменения возможно код не работал в песочнице(

[Speakermen]

Kentavr16, Вы оказались правы спасибо огромное Вам сработало. Нашёл этот фрагмент кода, переделал под себя) Напишите плиз в ответы вдруг пригодится ещё кому-нибудь

React. Add/Remove event listener

useEffect(() => {
    function handleNext() {
      dispatch(nextAudio());
    }

    player.addEventListener('ended', handleNext);
    return () => player.removeEventListener('ended', handleNext);
  }, []);

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { playAudio, nextAudio, prevAudio } from './../slices/playlistSlice.js';

export default function Control() {
  const dispatch = useDispatch();
  const id = useSelector((state) => state.playlist.id);
  const player = useSelector((state) => state.playlist.audio);
  const flag = useSelector((state) => state.playlist.flag);

  console.log(id);

  function handleSuffle() {}
  function handleRepeat() {}

  //player.addEventListener('ended', () => dispatch(playAudio(id++)));
  //player.addEventListener('ended', () => dispatch(nextAudio(id)));
  useEffect(() => {
    function handleNext() {
      dispatch(nextAudio());
    }

    player.addEventListener('ended', handleNext);
    return () => player.removeEventListener('ended', handleNext);
  }, []);

  //player.addEventListener('ended', () => dispatch(nextAudio(id)));

  return (
    <div className="controls_wrapper">
      <div className="controls_btn_suffle" onClick={handleSuffle}>
        <svg className="icon">
          <use xlinkHref="icons.svg#icon-suffle"></use>
        </svg>
      </div>
      <div
        className="controls_btn_prev"
        onClick={() => dispatch(prevAudio(id))}
      >
        <svg className="icon">
          <use xlinkHref="icons.svg#icon-prev"></use>
        </svg>
      </div>
      <div
        className="controls_btn_pause"
        onClick={() => dispatch(playAudio(id))}
      >
        {flag ? (
          <svg className="icon">
            <use xlinkHref="icons.svg#icon-pause"></use>
          </svg>
        ) : (
          <svg className="icon">
            <use xlinkHref="icons.svg#icon-play"></use>
          </svg>
        )}
      </div>
      <div
        className="controls_btn_next"
        onClick={() => dispatch(nextAudio(id))}
      >
        <svg className="icon">
          <use xlinkHref="icons.svg#icon-next"></use>
        </svg>
      </div>
      <div className="controls_btn_repeat" onClick={handleRepeat}>
        <svg className="icon">
          <use xlinkHref="icons.svg#icon-repeat"></use>
        </svg>
      </div>
    </div>
  );
}

[Kentavr16]

Speakermen, рад что помог. И еще раз о мемоизации и прочих магиях - рекомендую к прочтению книгу "advanced react" автора Надя Макаревич. Должна быть на русском, на английском можно без проблем найти электронную версию. Там много о том как реакт работает, с примерами из реальной жизни. Мемоизация, ререндеры и тд. Это когда почувствуешь что уже понимаешь в полной мере основы реакта. Как минимум почитать про мемоизацию раздел - убережет от ненужных/неработающих применений этого механизма.

[Speakermen]

Kentavr16, спасибо Вам прочту

Answer 1

[Kentavr16]

Проблема в том что ты добавляешь прослушиватель просто в коде и нигде его не очищаешь. Если учесть что компонент может рендериться несколько раз, особенно в режиме разработки, то и прослушивателей может навеситься несколько. Используй для этого хук эффекта , в котором укажи что при размонтировании компонента нужно удалить слушатель события.

Comments

[Speakermen]

Сработало спс

useEffect(() => {
    function handleNext() {
      dispatch(nextAudio());
    }

    player.addEventListener('ended', handleNext);
    return () => player.removeEventListener('ended', handleNext);
  }, []);