Uncaught TypeError: Cannot call a class as a function in react and redux

Question

I am using reactjs and redux for data control,and the code for component is

Employeeprofile.jsx:

import React from 'react';
import UserPersonalProfile from './UserPersonalProfile.jsx';
import ViewUserPersonal from './ViewUserPersonal.jsx';
import UserBankInformation from './UserBankInformation.jsx';
import UserContactDetails from './UserContactDetails.jsx';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {personaldetails,employeedetails, personaldetails_response} from '../actions/index.jsx'
import {personaldetailreducer} from '../reducers/personaldetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class EmployeeProfilePage extends React.Component{

    render()
        {
        return(
            <div>
                <div className="container">
                    <div className="row">
                        <div className="margin">
                            <div className="col-md-12">
                                <div className="main_content">
                                    <div className="row">
                                        <div className="col-md-12">
                                             <div className="row">
                                                 <div className="col-sm-12" data-spy="scroll" data-offset="0">
                                                    <UserPersonalProfile />
                                                 </div>
                                                 <div className="col-sm-6">
                                                    <ViewUserPersonal />
                                                 </div>
                                                 <div className="col-sm-6">
                                                    <UserContactDetails />
                                                 </div>
                                                 <div className="col-sm-6">
                                                    <UserBankInformation />
                                                 </div>
                                             </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}


export default  EmployeeProfilePage;

UserPersonalProfile.jsx:

import React from 'react';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {employeedetails, employeedetails_response} from '../actions/employee_actions.jsx'
import {personaldetailreducer} from '../reducers/personaldetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';


class UserPersonalProfile extends React.Component
{

    constructor(props) {
        super(props);
        this.state = {
            EmployeeProfile: []
        };
    }

    componentDidMount()
    {
            this.props.employeedetails();
            this.setState({EmployeeProfile:this.props.employeedetails()})
    }
    render(){
        return(
            <div className="panel panel-info">
                <div className="panel-heading">
                    <div className="row">
                        <div  className="col-lg-12 panel-title">
                            <strong>Your Personal Profile</strong><span className="pull-right"><Link to='/home' className="view-all-front btn btn-default">Go Back</Link></span>
                        </div>
                    </div>
                </div>
                <div className="col-lg-12 well-user-profile">
                    <div className="row">                            
                        <div className="col-lg-2 col-sm-3">
                            <div className="fileinput-new">
                                <img src="/static/users/app/images/profilepic.jpg" id="accountimg" />
                            </div>
                        </div>
                        <div className="col-lg-8 col-sm-8 ">
                            <div className="personalprofile">                                        
                                <h3></h3>
                                <hr />
                                <dl className="dl-horizontal">
                                    <dt id="detail1">Employee Code</dt>

                                    <dt id="detail2">Biometric ID</dt>

                                    <dt id="detail3">Department</dt>

                                    <dt id="detail4">Designation</dt>

                                    <dt id="detail5">Joining Date</dt>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state,props) {
    console.log(state,'state data')
    console.log(props,'props data')

  return {
    EmployeeProfile: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    employeedetails: UserPersonalProfile
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(UserPersonalProfile);

Reducers:

personaldetails.jsx:

import { FETCH_USER_DATA ,
         FETCH_USER_SUCCESS,
         FETCH_USER_ERROR
       } from '../actions/constants'


const initialState =
    {
        "first_name": " ",
        "last_name": " ",
        "email": "",
        "profile": null,
        "fetching":false,
        "fetched" :false,
        "error":null
    }



// Takes care of changing the application state
function personaldetailreducer (state=initialState, action)

        {
            switch (action.type)
            {

                case "FETCH_USER_DATA":
                    return Object.assign({}, state, action.payload);

                case "FETCH_USER_DATA_ERROR":
                    return {state,fetching:false,error:action.payload};

            }

            return state
        }

export default personaldetailreducer

Actions:

employee_actions.jsx:

import {
    LOGIN_FORM,
    LOGIN_API,
    USER_PERSONAL_DETAILS_API,
    EMPLOYEE_DETAILS_API,
    FETCH_USER_DATA,
    FETCH_EMPLOYEE_DATA,
    FETCH_EMPLOYEE_DATA_SUCCESS,
    FETCH_EMPLOYEE_DATA_ERROR,
    FETCH_USER_SUCCESS,
    FETCH_USER_ERROR

} from './constants';
import axios from 'axios';
import { Link ,browserHistory} from 'react-router';
import ReduxPromise from 'redux-promise';
import configureStore from '../store/store.jsx'

/* Using EMPLOYEE_DETAILS_API,user is authenticated using token and corresponsing user profile details is
 displayed in front end */

    export  function employeedetails() {
        var hash_token ='Token '+ localStorage.getItem('usertoken');

        return dispatch => {
            axios.get(EMPLOYEE_DETAILS_API,
                    {headers:{'Authorization': hash_token,
                         'Content-Type' : "application/json"
                    }})
                .then(res => {
                    console.log(res,'responseeeeeeeeeeeeee')
                    var profile_response = res;
                    dispatch(employeedetails_response(profile_response));
                            });

                        };
                    }

/* Using EMPLOYEE_DETAILS_API ,user is authenticated using token and corresponsing user profile details is
 displayed in front end */

    export const employeedetails_response = (response) =>
    ({
            type:FETCH_EMPLOYEE_DATA ,
            payload: response
    })

Here,the issue is when i am calling component onload, i am getting "Cannot call class a function".As I am calling the above component inside another component the issue came.

The component 'UserPersonalProfile.jsx' is used inside 'EmployeeProfilePage.jsx' and its reducers and actions is used.

Any help is appreciated.

Thanks in advance.

Hi @priya, welcome to SO. Could you also paste the code where you are using this component? — hazardous, May 15 '17 at 10:29
I'm not a pro with redux but I think the problem is here: `return bindActionCreators({ employeedetails: UserPersonalProfile }, dispatch);` signature is `bindActionCreators(actionCreators, dispatch)` Yes you are passing an object but the value is a component? — Jonathan Dion, May 15 '17 at 11:09
@jonathandion , I have to edit the code as 'bindActionCreators(employeedetails,dispatch) ah? — priya, May 15 '17 at 11:20

score 2 · Accepted Answer · answered May 15 '17 at 12:00

The solution is pretty easy,

In your mapDispatchToProps function, you are calling bindActionCreators wrongly, you need not bind it to the component but the action as

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    employeedetails: employeedetails
  }, dispatch);
}

score 1 · Answer 2 · answered May 15 '17 at 12:22

1

I think the problem is here:

  return bindActionCreators({
    employeedetails: UserPersonalProfile
  }, dispatch);

bindActionCreators signature is bindActionCreators(actionCreators, dispatch)

actionCreators (Function or Object): An action creator, or an object whose values are action creators.

Change the value of employeedetails for your action creator employeedetails(employee_actions.jsx) instead of your Component.

  return bindActionCreators({
    employeedetails: employeedetails
  }, dispatch);

answered May 15 '17 at 12:22

Jonathan Dion

1,651
11
16

I'm glad I helped! Can you accept the answer? Thank you. – Jonathan Dion May 15 '17 at 19:19
yeah sure.I accepted the answer.but i can't give upvote as i have less points – priya May 16 '17 at 04:22

Uncaught TypeError: Cannot call a class as a function in react and redux

2 Answers2