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.
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);
}