CODEWITHSUNDEEP
reactjsredux
Luke
Luke

Reputation: 73

Redux api calling

I'm wanting to update my trending array with the results calling the tmdb api. I'm not sure if im going about this the wrong way with calling the api or if im messing up somewhere else along the way. So far I've really been going in circles with what ive tried. Repeating the same things and not coming to a real solution. Havent been able to find another question similar to mine. 

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

Upvotes: 1

Views: 42

Answers (1)

Sahil Raj Thapa
Sahil Raj Thapa

Reputation: 2483

Since you are directly calling the getTrending without passing it to connect method, it might be the issue.

Instead that you can pass getTrending to connect method so it can be available as props in the component. After that it can be dispatched and it will be handled by redux/ redux-thunk.

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

And access it as props in the component.

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

Upvotes: 1

Related Questions