Как смоделировать в реальном времени после отправки запроса? - PullRequest
0 голосов
/ 04 мая 2020

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

Например, эта песня имеет 30 просмотров после того, как я отправил запрос, она должна быть 31, но это все еще 30 деталей песни

Так есть ли способ сделать это в режиме реального времени?

Код

Просто, чтобы объяснить, я получаю песни из API, затем передаю их в функцию манипуляции, а затем сохраняю их в состоянии, после того, как пользователь щелкнет любую песню в list Я отправляю действие, чтобы сохранить весь список в хранилище приставок,

Редуктор

let initialState = {
  allSongs: [],
  currentIndex: 0,
};

const songsInPlayerReducer = (state = initialState, action) => {
  switch (action.type) {
    case SONGS_IN_PLAYER:
      return {
        ...state,
        allSongs: action.songs,
        currentIndex: action.index,
      };


    default:
      return state;
  }
};

export default songsInPlayerReducer;

Действие

export const saveSongsPlayer = (songs, index) => {
  return {
    type: SONGS_IN_PLAYER,
    songs,
    index,
  };
};

Главный экран (получить песни из API)

manipulateArray = async array => {
    let songs = [];
    array.map(track =>
      songs.push({
        id: track.id,
        name: track.name,
        countview: track.countview,
        url: this.state.url + track.sounds,
        img: this.state.url + track.avatar,
      }),
    );

    return songs;
  };

getRecentSongs = async () => {
    try {
      let response = await API.get('/index');

      let {recent_tracks} = response.data.data;
      let recent_songs = await this.manipulateArray(recent_tracks);


      this.setState({

        recent_songs,

        loading: true,
      });
    } catch (error) {
      console.log(error);
      this.setState({error: true});
    }
  };


// Here a function I call after I press to any song in List 

playSong = index => {
    this.props.saveSongs(this.state.recent_songs, index);

  };

Musi c компонент проигрывателя // Я просто рендеринг представлений счетчика (из хранилища примитивов) и отправляю запрос в API для увеличения представлений песни

incremntSongView = async () => {
    const {songs, currentIndex} = this.props;
    let id = songs[currentIndex].id;
    try {
      await API.post('/increnentView', {
        id,
      });
      console.log('increment Done');
    } catch (err) {

      console.log(err);
    }
  };

  onLoad = data => {
    this.setState(
      {
        duration: Math.floor(data.duration),
        loading: false,
      },
      () => this.incremntSongView(),
    );

  }


<Text>
     {this.props.songs[this.props.currentInx].countview}
</Text>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...