not a function error in redux

Question

I have made two api calls in actions. The code for reducer is something like this-

import {combineReducers} from 'redux';
import {GET_API_DATA, GET_QUERY_LIST} from '../actions/index.js';

function getApplicationData(state = [],action){
    switch(action.type){
        case GET_API_DATA:
            return[
                ...state,
                {
                    resultMeta:action.response,
                }
            ]

            default:
                return state

        case GET_QUERY_LIST:
            return[
                ...state,
                {
                    resultMeta:action.response
                }
            ]
    }
}

const data = combineReducers({
    getApplicationData
})

export default data;

And in action, I am making a call to the APIs like this-

import * as axios from 'axios';
import {Constants} from '../constants.js';

export const GET_API_DATA = 'GET_API_DATA';

export const getApi = ()=>{
    // const res=await axios.get('Constants.URLConst+"/UserProfile"',{headers:{Constants.headers}});
    // dispatch({type:GET_API_DATA,payload:res.data});
    return(d)=>{
        axios({
            method:'GET',
            url:Constants.URLConst+"/UserProfile",
            headers:Constants.headers
        }).then((response)=>{
            return d({
                type:GET_API_DATA,
                response
            });
        }).catch((e)=>{
            console.log("e",e);
        })
    }

}

export const GET_QUERY_LIST='GET_QUERY_LIST';

export const loadData=()=>{
    return(d)=>{
        axios({
            method:'GET',
            url:Constants.URLConst+"/Query?pageNum=1&totalperPage=15&userid=0",
            headers:Constants.headers
        }).then((response)=>{
            type:GET_QUERY_LIST,
            response
        }).catch((e)=>{
            console.log(e);
        })
    }
}

I am calling the loadData() function in a js file something like this-

import React,{Component} from 'react';
import {loadData} from './actions';
import {connect} from 'react-redux';

export class Home extends Component{

     componentDidMount(){
        this.props.loadData();
     }

     render(){
       return null;
    }

}

const mapStateToProps = (state) => {
    return{
        resultCame: state.getApplicationData
    }
}

export default connect(mapStateToProps, {
    loadData: loadData
})(Home);

I have two different js files, where I am calling these two functions. While, the first one works fine, for the second one I get the error,

loadData() is not a function.

How can I call multiple functions in redux and what is the problem here??

Answer 1

In your second axios call you need to dispatch the action.

See updated code below

export const loadData = () => {

    return (dispatch) => {

        axios({
            method:'GET',
            url:Constants.URLConst+"/Query?pageNum=1&totalperPage=15&userid=0",
            headers:Constants.headers
        }).then((response)=>{
           // remember to dispatch the action once a response is received
           dispatch(
             type:GET_QUERY_LIST,
             response
           );
        }).catch((e)=>{
            console.log(e);
        });

    }
}