Why function never called redux thunk

Question

I don't understand why the action creator gets called but stuck somewhere in the middle. My component

import React, { Component } from 'react';
import { connect } from 'react-redux';

import {getSpots} from 'Actions';
import SpotsList from 'SpotsList'
import MapContainer from 'MapContainer';

import Alert from 'Alert';

class IndexPage extends Component{

    componentWillMount() {
        console.log('cwm indexpage', this.props.location.query);
        getSpots('london', 1, 1)
    }


    render() {      
        return (            
            <div className='index-page row'>
                <Alert />               
                <div className='col-sm-5 no-padding'>
                    <MapContainer />
                </div>
                <div className='col-sm-7 no-padding' id='right'>
                    <SpotsList/>
                </div>
            </div>
        );  
    }
}

export default connect(null, {getSpots})(IndexPage);

And all the action creators:

import axios from 'axios';
import {browserHistory} from 'react-router';

const ROOT_URL = '/api/spots/';

//get list of polls
export function getSpots(location='London', offset=0, sort=0){  
    console.log('getSpots1',location, offset, sort)
    return function(dispatch){                  
        console.log('getSpots2',location, offset, sort)
        dispatch(removeErroMessage());                      
        dispatch(changeLoadingStatus());        
        axios.get(ROOT_URL+'?location='+location+'&offset='+offset+'&sort='+sort+'&category_filter=bars')
            .then((response)=>{     
            console.log('got response')     
                dispatch({
                    type: 'GET_SPOTS',
                    payload: response.data.businesses
                });
                dispatch({
                    type: 'SET_TERM',
                    payload: location
                });             
                dispatch(setMapCenter({
                        lat: response.data.latitude,
                        lng: response.data.longitude
                    }));        
                dispatch({
                        type: 'SET_SPOTS_COUNT',
                        payload: response.data.total
                    });     
                dispatch(changeLoadingStatus());
            })
            .catch((error)=>{   
                var {status} = error.response;

                if(status==400){                    
                    dispatch(setErrorMessage('Sorry! No results were found for the requested search. Try searching with some different keywords')); 
                }else{
                    dispatch(setErrorMessage('Something went wrong. We are working on it.'));   
                }                               
            })
    }   
}

export function selectSpot(id){ 
    return {
        type: 'SELECT_SPOT',
        payload: id
    };
}

export function setMapCenter(coords){
    return {
        type: 'SET_MAP_CENTER',
        payload: coords
    };  
}

export function setSort(sort){
    return {
        type: 'SET_SORT',
        payload: sort
    }
}


export function changeLoadingStatus(){  
    console.log('changeLoadingStatus')
    return {
        type: 'CHANGE_LOADING_STATUS'
    }
}


export function setErrorMessage(error){
    return {
        type: 'SET_ERROR',
        payload: error
    }
}

export function removeErroMessage(){
    console.log('removeErroMessage')
    return {
        type: 'REMOVE_ERROR'
    }
}

The output was:

cwm indexpage Object {  }  bundle.js:29712:5
getSpots1 london 1 1   

So the getSpots action creator has been called, but there was no request to the server. What's wrong with my method?

Answer 1

I think your connect is being used in a wrong way. It does nothing. Instead you can bind your actions as I did and use your thunk actions.

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';

//import {getSpots} from 'Actions';
import * as myActions from 'Actions'
import SpotsList from 'SpotsList'
import MapContainer from 'MapContainer';

import Alert from 'Alert';

class IndexPage extends Component{

    componentWillMount() {
        console.log('cwm indexpage', this.props.location.query);
        this.props.myActions.getSpots('london', 1, 1)
    }


    render() {      
        return (            
            <div className='index-page row'>
                <Alert />               
                <div className='col-sm-5 no-padding'>
                    <MapContainer />
                </div>
                <div className='col-sm-7 no-padding' id='right'>
                    <SpotsList/>
                </div>
            </div>
        );  
    }
}

export default connect(
 state => ({}), 
 dispatch => ({
  myActions : bindActionCreators(myActions,dispatch) 
 }) 
)(IndexPage);

Answer 2

You forgot to add dispatch method to trigger action.

this.props.dispatch(getSpots('london', 1, 1));