React Redux在Next.js和NodeJS中无法正常工作

Question

我正在通过遵循this example使用带有Redux的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路由上。

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

您可能想看this section about Custom Server and Routing。

Answer 2

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

应该是：

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

Answer 3

@MunimMunna在现场。您的服务器正在将您重定向到HTML登录页面，或者为失败的凭据返回HTML错误页面。无论哪种情况，Axios都会看到200状态代码，因此它认为响应是有效的。您的动作创建者会盲目地触发附加了HTML有效负载的动作。

考虑进行以下更改：

• 客户：

  • 在您的axios承诺中添加catch块，以记录失败的响应。
  • 传递Accept的{​​{1}}标头，告诉服务器您不需要HTML响应。如果幸运的话，这足以使NextJS发挥所需的作用。

• 服务器：如果需要，请更改服务器以检测该请求是XHR请求还是application/json是客户端所需的唯一响应类型。如果这些条件成立，请不要重定向。 Return返回401状态代码。您可以选择返回带有一些额外错误信息的JSON正文。