I have two APIs which are written in action and reducer using redux.The first api fetches a list of user and the second api based on user id which comes from the first api.

The APIs are as follows
action.js

```
export const GET_EXPERT_LIST='GET_EXPERT_LIST';
export const GET_PROFILE_PHOTO='GET_PROFILE_PHOTO';
export const getExpertList=()=>{
    return(dispatch)=>{
        axios({
            method:'POST',
            url:Constants.URLConst+"/xyz",
            headers:Constants.headers,
            data:{
                "PageNum" : 1,
            }
        }).then((response)=>{
            return dispatch({
                type:GET_EXPERT_LIST,
                response
            })

        }).catch((error)=>{
            console.log(error);
        })
    }
}

export const getProfile=(userid)=>{
    return(dispatch)=>{
        axios({
             method:'GET',
             url:Constants.URLConst+"/UserProfileImage?enterpriseId="+userid,
             headers:Constants.headers
        }).then((response)=>{
             dispatch({
                type:GET_PROFILE_PHOTO,
                response
             })
        }).catch((error)=>{
            console.log(error);
        })
    }
}

```

And in reducer.js, I have-

```
import {combineReducers} from 'redux';
import {ASK_EXPERT_DATA,GET_EXPERT_LIST,GET_PROFILE_PHOTO} from '../actions/ProfilePageActions.js';

export function getExpertList(state={},action){
    switch(action.type){
        case GET_EXPERT_LIST:
            return {...state, ...action.response}
            default:
                return state
    }
} 

export function getProfile(state={},action){
    switch(action.type){
        case GET_PROFILE_PHOTO:
            return {...state, ...action.response}
            default:
                return state
    }
}

const data=combineReducers({
    getExpertList,
    getProfile
})

export default data;

```

In the main javascript file, I am calling the first api in `componentDidMount`,
since the first api return an array which I am using map() for display.

```
import React,{Component} from 'react';
import ReactDom from 'react-dom';
import {getExpert,getExpertList} from './actions/ProfilePageActions.js';
import {connect} from 'react-redux';
import theme from './assets/react-toolbox/theme';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
import Card from 'react-toolbox/lib/card/Card.js';
import CardTitle from 'react-toolbox/lib/card/CardTitle';
import CardMedia from 'react-toolbox/lib/card/CardMedia';
import Chip from 'react-toolbox/lib/chip/Chip.js';
import CardText from 'react-toolbox/lib/card/CardText';

class FindExpert extends Component{

    state={
        countries: ['ES-es', 'TH-th'],
        source:[],
        valueSelected:[],
        experts:[]
    }   

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

    componentWillReceiveProps(nextProps){

        if(nextProps.get_Expert_List && nextProps.get_Expert_List.data){
            this.setState({
                experts:[...nextProps.get_Expert_List.data.Experts] 
            })
        }
    }

    getExpertInfo(){
        var i=1;
        if (this.state.experts && this.state.experts.length) {
            this.test = this.state.experts.map((expertUSer)=> {
                this.props.getProfile(expertUSer.UserId);
                console.log(this.props.get_profile);
                return(
                    <ThemeProvider theme={theme} key={i++}>
                        <Card className='experts'>

                            <CardTitle title={expertUSer.Name}
                                subtitle={expertUSer.Designation}/>
                            <CardText>{expertUSer.Country}</CardText>
                        </Card>
                    </ThemeProvider>
                    )
            });

            return this.test;
        }
        return null;
    }

    render(){
        if(this.props.ask_expert.data){
            return(
                <div className='expert-div' id='expert-div'>{this.getExpertInfo()}</div> 
                    )
        }else{
            return null;
        }
    }
}

const mapStateToProps=(state)=>{
    console.log({getExpert: state.getProfile});
    return{
        get_Expert_List:state.getExpertList,
        get_profile:state.getProfile
    }
}

export default connect(mapStateToProps,{
    getExpertList,
    getProfile
})(FindExpert);

```

So,in getExpertList's data, I am calling the getProfile by passing the user id of the individual user.But in `this.props.getProfile(expertUSer.UserId);`, I get the error that 

> 
> getProfile is not a function
> 
> 
> 

[![erro](https://i.stack.imgur.com/R5DPm.png)](https://i.stack.imgur.com/R5DPm.png)

What should be done here?