Why is API request returning [object Object] in the reducer's action value?

Question

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

Answer 1

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

this.dispatch(this.loadGiphs(0, 3));