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

Question

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

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

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

you have a spelling mistake here. dispacth({ type: actionTypes.SUBMIT_LOGIN, payload: res.data });. dispacth should be dispatch. — Usama Tahir
– Usama Tahir, Commented Jul 3, 2019 at 6:15
This is not an issue, these mistakes in my post, not my code @UsamaTahir — jesica
– jesica, Commented Jul 3, 2019 at 10:00
can you please provide minimal working code? I will debug the issue and let you know my findings. — Usama Tahir
– Usama Tahir, Commented Jul 3, 2019 at 10:02
@UsamaTahir It's very difficult to provide the full working codes because it's huge but the main functionality is in the post which is implemented for the redux purpose — jesica
– jesica, Commented Jul 3, 2019 at 12:15
When you are not logged in you are being redirected to some page, so axios gets HTML content as data, you are seeing that in your console. Check the network tab in browser dev-tools to check redirect responses. — Munim Munna
– Munim Munna, Commented Jul 3, 2019 at 15:37

Pier Paolo Ramon · Accepted Answer · 2019-07-03 20:43:52Z

7

+25

The problem is probably not on your React / Redux code but on your Next.js routes.

You’re trying to call an API with axios.get('/api/current_user') but Next.js is giving you an HTML response, that you indeed store in authReducer extracting it as action.payload.

You probably want to see this section about Custom Server and Routing.

answered Jul 3, 2019 at 20:43

Pier Paolo Ramon

2,91927 silver badges27 bronze badges

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

Comments

Trevor-Indrek Lasn · Accepted Answer · 2019-06-30 09:25:14Z

0

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

Should be:

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

answered Jun 30, 2019 at 9:25

Trevor-Indrek Lasn

3162 gold badges8 silver badges17 bronze badges

1 Comment

jesica Over a year ago

This is not an issue, these mistakes in my post, not my code

bigh_29 · Accepted Answer · 2019-07-09 20:24:24Z

@MunimMunna is spot on. Your server is either redirecting you to an HTML login page, or returning an HTML error page for failed creds. In either case, Axios is seeing a 200 status code, so it thinks the response is valid. Your action creator blindly fires off the action with the HTML payload attached.

Consider making these changes:

Client:
- Add a catch block to your axios promise that logs failed response.
- Pass an Accept header of application/json to tell the server you don't want HTML responses. If you are lucky, this might be enough to get NextJS to behave the way you want.
Server: If needed, change the server to detect whether the request is an XHR request, or if application/json is the only response type the client wants. Don't redirect if those conditions are true. Return return a 401 status code instead. You can optionally return a JSON body with some extra error information.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related