Question

我是Redux的新手，正在使用Spotify API从事一个项目。我正在发送API调用并检索有关当前播放歌曲的数据。

我有一个单独的Redux动作，正在尝试从当前正在播放的歌手那里抓取其他专辑。在我的App.js中，我可以通过const id = this.props.currentlyPlaying.id

访问艺术家的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在操作中直接访问id，这也不起作用。

Answer 1

不要尝试导入id，在调用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>

Answer 2

您需要做的是从组件调用动作时将id传递给动作函数，就像这样：我还将建议您使用redux-thunk中间件来处理a异步操作。

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})
      });

  }
}

React / Redux-将变量传递给行动

2 个答案: