json not render with reactjs and redux - json

Question

i load a .json with axios, and the file load well, but when i rendered dont work
editprofile.js --> create the dispatch, and load de json
export const editProfile = (callback)=>{
return function(dispatch){
dispatch({type: 'EDIT_PROFILE_REQUEST'});
axios({
method: 'get',
url: 'https://gist.githubusercontent.com/anonymous/38c1444f753c70cf79ee980638a14de7/raw/34951eebfa006fea3db00fb492b491ac990c788e/vamos.json',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then((response)=>{
dispatch({type:'EDIT_PROFILE_SUCCESS', payload:response.data});
if (typeof callback === 'function') {
callback(null, response.data);
}
})
.catch((error) =>{
dispatch({type:'EDIT_PROFILE_FAILURE'});
if(error.response.status == 401){
browserHistory.push('login')
toastr.error(error.response.message, 'User')
}
if(typeof callback ==='function'){
callback(error.response.data, null)
}
})
}
}
EditProfileComponent.jsx -->created the component
export default class EditProfileComponent extends Component{
render(){
return(
<table>
<thead>
<tr>
<th>SN</th>
<th>Email</th>
<th>created</th>
</tr>
</thead>
<tbody>
{this.renderEditProfile()}
</tbody>
</table>
)
}
renderEditProfile(){
let sN = 1;
return this.props.allProfile.map((user)=>{
return(
<tr key={user.sN} >
<td>{sN++}</td>
<td>{user.email ? user.email : '---'}</td>
<td>{user.created_at ? user.created_at : '---'}</td>
</tr>
);
});
}
}
join the component with the service
import {editProfile} from '../action/editProfile.js';
import EditProfileComponent from '../component/editProfileComponent.jsx';
export default class EditProfileContainer extends Component{
componentDidMount(){
this.props.editProfile();
}
render (){
return (
<EditProfileComponent allProfile={this.props.allProfile} />
);
}
}
function mapStateToProps(store) {
return {
allProfile:store.allProfile
};
}
function matchDispatchToProps(dispatch){
return bindActionCreators({
editProfile:editProfile
}, dispatch)
}
export default connect
(mapStateToProps, matchDispatchToProps)(EditProfileContainer);
editProfileReducer --> the reducer
export const editProfileReducer = (state=[], action) =>{
switch(action.type){
case 'EDIT_PROFILE_REQUEST':
return state;
case 'EDIT_PROFILE_FAILURE':
return state;
case 'EDIT_PROFILE_SUCCESS':
return [...action.payload];
default:
return state;
}
}
join all the reducer
import { editProfileReducer } from './reducer/editProfileReducer.js'
const reducers = combineReducers({
allProfile:editProfileReducer,
});
export default reducers;

Answer 1

There is an error in your reducer. For EDIT_PROFILE_SUCCESS, it should be
case 'EDIT_PROFILE_SUCCESS':
return [...state, action.payload];
On a side note, you can take advantage of es6's arrow function:
export const editProfile = (callback) => (dispatch) => {
dispatch({type: 'EDIT_PROFILE_REQUEST'});
// ....
};
You also should use constants for action names.

Answer 2

I think there is problem with :
function mapStateToProps(store) {
return {
allProfile:store.allProfile
};
}
it should be:
function mapStateToProps(state) {
return {
allProfile:state.allProfile
};
}