javascript - 加载状态永远不会变为真？？(React - Redux)

Question

我正在创建一个应用程序，当用户登录时从后端获取用户数据并将其显示在用户个人资料中，我需要设置加载语句，例如 loading... 来代替在所有数据来自后端之前配置文件，然后显示数据

我的 Action 创建者:

export const loginUser = (loginData) => (dispatch) => {

    axios.post('/signin', loginData)
        .then(res => {
            let FBIdToken = `Bearer ${token}`;
            localStorage.setItem('FBIdToken', FBIdToken);
            dispatch(getUserData());
        })
        .catch(err => {
            dispatch({
                type: SET_ERRORS,
                payload: err.response && err.response.data
            });
        });
}

export const getUserData = () => dispatch => {
    dispatch({ type: LOADING_USER });

    axios.get('/user')
        .then(res => {
            dispatch({
                type: SET_USER,
                payload: res.data
            })
        })
        .catch(err => console.log(err))
}

reducer :

const intialState = {
    authenticated: false,
    loading: false,
    credentials: {},
};

export default (state = intialState, action) => {
    switch (action.type) {
        case SET_USER:
            return {
                authenticated: true,
                loading: false,
                ...action.payload,
            }
            case LOADING_USER:
                return {
                    loading: true,
                    ...state
                }

        default:
            return state;
    }
};

登录页面:

    const handleSubmit = (e) => {  
        e.preventDefault();
        loginUser(loginData);
    }

现在，当我单击登录页面上的提交按钮时，handlesubmit 函数运行 loginUser 操作创建者，该创建者在 Angular 色中运行 getUserData 操作创建者。

现在在 getUserData 操作创建者中，此操作被调度 {type: LOADING_USER} 并且此状态应在 userData 来自后端之前从 reducer 返回:

{
  loading: true,
  credentials: {},
  authenticated: false
}

然后数据在 axios 请求之后出现，并将 loading 更改为 false 并设置用户凭据，但这不是我的情况，因为加载永远不会在我的代码中获取 true ，并且正在加载...永远不会在设置为用户配置文件的用户凭据之前显示。我的代码有什么问题？

Answer 1

正如我在上面的评论中提到的，您需要切换 loading: true 和 ...state 的顺序。

原因:(正如您所猜测的)当您传播对象时，顺序很重要，特别是如果正在传播的对象内部还包含 loading 键。因此，如果您在 loading: true 之后保留 ...state，它将用任何值 state 覆盖 loading: true code> 用于加载。我想这不是我们想要的。因此，请在 loading: true 之前保留 ...state 以获得预期结果。