加载 state 永远不会成真？？（React - Redux）

Question

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

我的动作创造者：

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))
}

减速器：

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 function 上的提交按钮时，运行loginUser操作创建器，该操作创建器实际上运行getUserData操作创建器。

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

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

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

Answer 1

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

原因：（如您所料）当您传播 object 时，顺序很重要，特别是如果传播的 object 中还包含loading密钥。 因此，如果您在loading: true之后保留...state ，它会使用state对loading具有的任何值覆盖loading: true 。 我想这不是我们想要的。 因此，在加载前保留...state loading: true以获得预期结果。

Answer 2

您在当前更新的 state 之后传播之前的 state：

case LOADING_USER:
  return {
    loading: true,
    ...state
  }

你需要做相反的事情：

case LOADING_USER:
   return {
     ...state,
     loading: true,              
   }

通过在加载后传播 state，您之前的 state 会覆盖新的 state，但是通过首先传播之前的 state，您只会覆盖状态的加载部分！