React Redux не работает должным образом с Next.js & NodeJS

Question

Я работаю над приложением, использующим Next.js с избыточностью, следуя этому примеру , и здесь есть некоторая часть 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 });
};

и сторона клиента, такая какheader

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

export default connect(mapStateToProps)(Header)

и когда я console.log('############=>', this.props.user); реквизит и я не залогинен, то он показывает ноль, но показывает некоторые дополнительные данные, такие как скриншот ниже

, но когда я вошел в систему & console.log('############=>', this.props.user);, он показывает правильные данные без дополнительных данных, таких как изображение ниже

что я делаю не так?Помогите мне, пожалуйста.Спасибо

Answer 1

Возможно, проблема не в вашем коде React / Redux, а в маршрутах Next.js.

Вы пытаетесь вызвать API с помощью axios.get('/api/current_user'), но Next.js дает вам HTML-ответ, который вы действительно храните в authReducer, извлекая его как action.payload.

Возможно, вы захотите увидеть этот раздел о пользовательском сервере и маршрутизации .

Answer 2

@ MunimMunna находится на месте.Ваш сервер либо перенаправляет вас на страницу входа в систему HTML, либо возвращает страницу ошибок HTML для неудачных кредитов.В любом случае Axios видит код состояния 200, поэтому считает, что ответ верен.Создатель вашего действия вслепую запускает действие с приложенной полезной нагрузкой HTML.

Рассмотрите возможность внесения следующих изменений:

• Клиент :

  • Добавьте блок catch к вашему обещанию axios, в котором регистрируется неудачный ответ.
  • Передайте заголовок Accept application/json, чтобы сообщить серверу, что вы не хотите ответов HTML.Если вам повезет, этого может быть достаточно, чтобы заставить NextJS вести себя так, как вы хотите.

• Сервер : при необходимости измените сервер для обнаруженияявляется ли запрос запросом XHR, или если application/json является единственным типом ответа, который хочет клиент.Не перенаправляйте, если эти условия выполняются.Вместо этого верните код состояния 401.При желании вы можете вернуть тело JSON с дополнительной информацией об ошибке.

Answer 3

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

Должно быть:

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