Wednesday, 3 July 2019

React Redux is not working as expected with Next.js & NodeJS

I'm working on an app using Next.js with redux by following this example and here is some part of store.js

// REDUCERS
const authReducer = (state = null, action) => {
    switch (action.type){
        case actionTypes.FETCH_USER:
            return action.payload || false;
        default:
            return state;
    }
}

export const rootReducer = combineReducers({
    user: authReducer,
    form: reduxForm,
});

// ACTIONS
export const fetchUser = () => {
    return (dispatch) => {
        axios.get('/api/current_user')
            .then(res => dispatch({
                type: actionTypes.FETCH_USER, 
                payload: res.data
            }));
    };
};

export const submitLogin = (values) => async dispacth => {
    const res = await axios.post('/api/login', values);

    // Router.push('/');
    // console.log(res)

    dispacth({ type: actionTypes.SUBMIT_LOGIN, payload: res.data });
};

and the client side such as header

function mapStateToProps (state) {
    const { user } = state
    return { user }
}

export default connect(mapStateToProps)(Header)

and when I console.log('############=>', this.props.user); the props & I'm not loggesd in then it's showing null but showing some extra data such as below screenshot

enter image description here

but when I logged in & console.log('############=>', this.props.user); it's showing proper data without extra data such as below image

enter image description here

what I'm doing wrong? please help me. Thanks



from React Redux is not working as expected with Next.js & NodeJS

No comments:

Post a Comment