json not render with reactjs and redux

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;

lpan · Accepted Answer · 2017-01-02 19:31:22Z

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.

answered Jan 2, 2017 at 19:31

lpan

4785 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Codesingh · Accepted Answer · 2017-01-02 19:31:11Z

0

I think there is problem with :

 function mapStateToProps(store) {
            return {
                allProfile:store.allProfile
            };
        }

it should be:

 function mapStateToProps(state) {
            return {
                allProfile:state.allProfile
            };
        }

answered Jan 2, 2017 at 19:31

Codesingh

3,3941 gold badge14 silver badges19 bronze badges

Collectives™ on Stack Overflow

json not render with reactjs and redux

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related