Redux API вызов

Question

Я хочу обновить свой массив трендов, чтобы результаты вызывали API tmdb. Я не уверен, что я собираюсь сделать это неправильно с вызовом API, или если я напортачу где-нибудь еще по пути. До сих пор я действительно ходил кругами с тем, что я пытался. Повторяя одни и те же вещи и не придя к реальному решению. Не удалось найти другой вопрос, похожий на мой.

my actions 

export const getTrending = url => dispatch => {
  console.log("trending action");
  axios.get(url).then(res =>
    dispatch({
      type: "TRENDING",
      payload: res.data
    })
  );
};

my reducer 
const INITIAL_STATE = {
  results: [],
  trending: []
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "SEARCH_INFO":
      return {
        results: [action.payload]
      };
    case "TRENDING":
      return { trending: action.payload };
    default:
      return state;
  }
};

and my component im trying to get the results from

import React, { Component } from "react";
import Trending from "./Treding";
import "../App.css";
import { getTrending } from "../actions/index";
import { connect } from "react-redux";

export class Sidebar extends Component {
  componentDidMount = () => {
    const proxy = `https://cors-anywhere.herokuapp.com/`;

    getTrending(`${proxy}https://api.themoviedb.org/3/trending/all/day?api_key=53fbbb11b66907711709a6f1e90fc884
    `);
  };
  render() {
    return (
      <div>
        <h3 className="trending">Trending</h3>
        {
        this.props.trending ? (
          <Trending movies={this.props.trending} />
        ) : (
          <div>Loading</div>
        )}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    trending: state.trending
  };
};

export default connect(mapStateToProps)(Sidebar);

Answer 1

Поскольку вы напрямую вызываете getTrending, не передавая его в метод connect, это может быть проблемой.

Вместо этого вы можете передать getTrending методу connect, чтобы он мог быть доступен как компонент в компоненте. После этого его можно отправить и обработать при помощи redux / redux-thunk.

export default connect(mapStateToProps, { getTrending })(Sidebar);

И получить доступ к нему как реквизиты в компоненте.

 componentDidMount = () => {
    // const proxy = `https://cors-anywhere.herokuapp.com/`;  
    this.props.getTrending(`https://api.themoviedb.org/3/trending/all/day?api_key=53fbbb11b66907711709a6f1e90fc884
    `);
  };