加載 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，您只會覆蓋狀態的加載部分！