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

Answer 1

问题可能不在您的React / Redux代码上，而在您的Next.js路由上。

您尝试使用调用API，axios.get('/api/current_user')但Next.js给您HTML响应，您确实将authReducer其存储为将其提取为action.payload。

您可能想看一下有关“自定义服务器和路由”的部分。