javascript - React Redux is not working as expected with Next.js & NodeJS - Stack Overflow

admin管理员组

文章数量:1386760

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 = bineReducers({
    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

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 = bineReducers({
    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

• javascript
• node.js
• reactjs
• redux
• next.js

Share Improve this question Follow asked Jun 30, 2019 at 9:00 jesicajesica 68522 gold badges1414 silver badges3838 bronze badges 6

• you have a spelling mistake here. dispacth({ type: actionTypes.SUBMIT_LOGIN, payload: res.data });. dispacth should be dispatch. – Usama Tahir Commented Jul 3, 2019 at 6:15
• This is not an issue, these mistakes in my post, not my code @UsamaTahir – 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 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 Commented Jul 3, 2019 at 12:15
• 2 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 Commented Jul 3, 2019 at 15:37

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 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.

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

Should be:

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

@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.

本文标签： javascriptReact Redux is not working as expected with Nextjs amp NodeJSStack Overflow