0

I'm trying to make a search app, with the Giphy API, redux and axios, but I think I'm going wrong somewhere with the API request to grab all the search results from the API.

I make an API request using an action, which is caught by a reducer, but when I console.log the value of action inside the reducer, I get [object Object] instead of the actual object. why is this?

I'm using ReduxPromise as my middleware.

here is my API request in the actions code:

import axios from 'axios';

export const FETCH_GIPHS = 'FETCH_GIPHS'

export function fetchGiphs(value) {
    const api = "http://api.giphy.com/v1/gifs/search";
    const API_KEY = 'hdUk5buTTISSC29bx2DAXfDRCz6tkcrS';

    const url = `${api}?q=${value}&api_key=${API_KEY}&limit=5"`;

    //http://api.giphy.com/v1/gifs/search?q=rainbow&api_key=hdUk5buTTISSC29bx2DAXfDRCz6tkcrS&limit=5"

    const request = axios.get(url);
    console.log('Request:', request)

    return {
        type: FETCH_GIPHS,
        payload: request
    }
}

and the reducer: 

export default function(state = null, action) {
    console.log('action recieved: ' + action)
return state;
}

and my main index.js, where my middleware is

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <App />
    </Provider>
, document.getElementById('root'));
user74843
  • 701
  • 2
  • 10
  • 28
  • 2
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – WayneC Dec 12 '17 at 11:34
  • because `const request = axios.get(url)` will be asyn call and you are returning the action before that. You need to check [How to return response from async call](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Mayank Shukla Dec 12 '17 at 11:34
  • but I'm using redux promise, so wouldn't that mean I would get the object returned in the reducer? When I console log the action, however, I just get [object Object] instead of an actual object... – user74843 Dec 12 '17 at 12:07

1 Answers1

1

I think your problem is that you do not dispatch your action

this.dispatch(this.loadGiphs(0, 3));
Tim
  • 11
  • 2