时间戳

首页 > 解决方案 > React/Redux - 将变量传递给动作

reactjs - React/Redux - 将变量传递给动作

问题描述

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

我有一个单独的 Redux 操作，它试图从当前播放的艺术家那里获取其他专辑。在我的 App.js 中，我可以通过以下方式访问艺术家的 IDconst 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 直接在操作中访问 id，这也不起作用。

标签： reactjsvariablesreduxreact-reduxaction

解决方案

不要尝试导入 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>

推荐阅读