Обновление массива редукса - PullRequest
0 голосов
/ 04 февраля 2019

Я пытаюсь обновить состояние воспроизведения в Redux, но каждый раз, когда я вызываю обновление, оно дважды проверяет, что полученное значение добавляется в состояние.

в результате мой фильтр при отображении (скрывает первый элемент) не работает из-за 2 дополнений.

Пример редуктора:

import {
    UPDATE_NOW_PLAYING,
    UPDATE_ARTIST_AND_TITLE,
    UPDATE_CURRENT_ARTIST
} from '../actions/actionTypes'
import { nowPlayingUrl, showNumberOfTracks, lastFmApiKey } from '../constants'

const currentState = {
    playHistory: [],
    currentArtist: '',
    currentTitle: '',
    currentShowName: '',
    currentAlbumUrl: 'https://https://url.to.logo/app/app/logo-app.png'
}

const NowPlayingReducer = (state = currentState, action) => {
    switch (action.type) {
        case UPDATE_ARTIST_AND_TITLE: {

            if (state.currentArtist !== action.array[0].artist) {
                return {
                ...state,
                playHistory: state.playHistory.concat(action.array[0]),
                currentArtist: action.array[0].artist,
                currentTitle: action.array[0].title,
                currentShowName: action.array[0].showName,
                currentAlbumUrl: action.array[0].albumUrl
            }
        }
        return state

        }

        case UPDATE_NOW_PLAYING: {
            return {
                ...state,
                playHistory: action.payload,
                currentArtist: action.payload[0].artist,
                currentTitle: action.payload[0].title,
                currentShowName: action.payload[0].showName,
                currentAlbumUrl: action.payload[0].albumUrl
            }
        }
        default: return state
    }
}

export default NowPlayingReducer

Так оно и работает, но единственная часть как-то является вторым дополнением: (

// Изменить:

componentWillMount() { 
   this.getNowPlaying()
}

componentDidMount() {
setInterval(async () => {
 await this.updateCurrentInformation()
  }, 10000);
}

updateCurrentInformation = async () => {
try { 
    let currentPlayingResponse = await fetch(nowPlayingUrl + 1 )
    let currentPlayingJson = await currentPlayingResponse.json()
    let newArray = []

      Promise.all(
            currentPlayingJson.nowplaying.map(async (album) => {
                const albumObj = await this.getAlbumInformation(album);
                newArray.push(albumObj);

                this.props.updateArtistAndTitle(newArray)
            })
        );
} catch(error) { console.log(error)};

}

togglePlayerType () {

}

getNowPlaying = async () => {
    try {
        let nowPlayingResponse = await fetch(nowPlayingUrl + showNumberOfTracks);
        let nowPlayingJson = await nowPlayingResponse.json();
        let newArray = [];

        Promise.all(
            nowPlayingJson.nowplaying.map(async (album) => {
                const albumObj = await this.getAlbumInformation(album);
                newArray.push(albumObj);
                this.props.updateNowPlaying(newArray);
            })
        );

    } catch (err) {
        console.log(err);
    }
}

getAlbumInformation = async (album) => {
    return new Promise(async (resolve, reject) => {
  let id = JSON.stringify(album.id).replace(/"/g, '');
  let title = JSON.stringify(album.title)
    .replace(/"/g, '')
    .replace(/([&][^&; ]+[;])/g, '');
  let artist = JSON.stringify(album.artist)
    .replace(/"/g, '')
    .replace(/([&][^&; ]+[;])/g, '');

  let dateTime = JSON.stringify(album.datetime).replace(/"/g, '');
  let showName = JSON.stringify(album.showName).replace(/"/g, '');
  let albumUrl = 'https://url.to.logo/app/logo-app.png';

  let obj = { id, title, artist, dateTime, showName, albumUrl };

  try {
    let albumResponse = await fetch(
      `https://ws.audioscrobbler.com/2.0/?method=track.getInfo&format=json&api_key=${lastFmApiKey}&artist=${artist}&track=${title}`
    );

    let albumJson = await albumResponse.json();
    if (albumJson) {
      url = albumJson.track.album.image[3]['#text'];
      if (url > '') {
        obj.albumUrl = albumJson.track.album.image[3]['#text'];
      } else {
        obj.albumUrl = 'https://url.to.logo/app/logo-app.png';
      }
    }
    resolve(obj);
  } catch (err) {
    resolve(obj);
  }
});
}
...