javascript - React Redux 无法与 Next.js 和 NodeJS 一起正常工作

Question

我正在按照 this example 开发一个使用 Next.js 和 redux 的应用程序这是 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); props & 我没有登录然后它显示为 null 但显示一些额外的数据，例如下面的屏幕截图

但是当我登录 & 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 .