React / Redux - передать переменную в действие - PullRequest
Новая
       14

React / Redux - передать переменную в действие

0 голосов
/ 19 октября 2018

Я новичок в Redux и работаю над проектом с использованием Spotify API.Я отправляю вызовы API и извлекаю данные о воспроизводимой в данный момент песне.

У меня есть отдельное действие Redux, которое пытается захватить другие альбомы у исполняющего в данный момент исполнителя.В моем App.js я могу получить доступ к идентификатору исполнителя через const id = this.props.currentlyPlaying.id

. Я хочу передать эту переменную из App.js в действие моего альбома.Действие содержит вызов API и выглядит следующим образом: 

import SpotifyWebApi from 'spotify-web-api-js';
import {id} from '../App.js';
const spotifyApi = new SpotifyWebApi();

export function fetchAlbums() {
  return function(dispatch) {
    dispatch({ type: "FETCH_ALBUMS_BY_ARTIST"});

    //'43ZHCT0cAZBISjO8DG9PnE'
    spotifyApi.getArtistAlbums(id)
      .then((response) => {
        dispatch({ type: "FETCH_ALBUMS_BY_ARTIST_FULFILLED", payload: response})
      })
      .catch((err) => {
        dispatch({ type: "FETCH_ALBUMS_BY_ARTIST_REJECTED", payload: err})
      });

  }
}

Я попытался импортировать переменную id, но получил ошибку.Как правильно передать переменную из компонента в действие Redux?Я также пытался получить доступ к идентификатору непосредственно в действии через this.props, который тоже не работает.

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Не пытайтесь импортировать идентификатор, передавайте его в качестве параметра при вызове действия fetchAlbums.

Что-то вроде:

ДЕЙСТВИЕ: 

export const fetchAlbums = (id) => async dispatch => {
  dispatch({ type: "FETCH_ALBUMS_BY_ARTIST"});

  //'43ZHCT0cAZBISjO8DG9PnE'
  spotifyApi.getArtistAlbums(id)
    .then((response) => {
      dispatch({ type: "FETCH_ALBUMS_BY_ARTIST_FULFILLED", payload: response})
    })
    .catch((err) => {
      dispatch({ type: "FETCH_ALBUMS_BY_ARTIST_REJECTED", payload: err})
    });
}

ИСПОЛЬЗОВАНИЕ ДЕЙСТВИЯ:

Это связывает функцию для вызова функции fetchAlbums, что позволяет передавать параметры вместо события click. 

<button onClick={() => fetchAlbums(id)}>Fetch Album</button>
0 голосов
/ 19 октября 2018

То, что вам нужно сделать, это когда вы вызываете действие из вашего компонента, чтобы передать th идентификатор функции action.Like это: я также рекомендую вам использовать промежуточное программное обеспечение redux-thunk для обработки асинхронных действий. 

export function fetchAlbums(id) {
  return function(dispatch,id) {
    dispatch({ type: "FETCH_ALBUMS_BY_ARTIST"});

    //'43ZHCT0cAZBISjO8DG9PnE'
    spotifyApi.getArtistAlbums(id)
      .then((response) => {
        dispatch({ type: "FETCH_ALBUMS_BY_ARTIST_FULFILLED", payload: response})
      })
      .catch((err) => {
        dispatch({ type: "FETCH_ALBUMS_BY_ARTIST_REJECTED", payload: err})
      });

  }
}
...