Redux api调用

Question

我想用调用tmdb api的结果更新我的趋势数组。我不确定我是否以错误的方式调用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
    `);
  };