基於登錄的Redux異步操作

Question

我在我的actions.js文件中有以下操作。但是，我收到錯誤「操作必須是普通對象，使用自定義中間件進行異步操作」。我假設這是因爲我把這個回報放在一個奇怪的地方。有任何想法嗎？

export function loginLookUp(credentials) { 
    const request = axios.post(`${LOGINLOOKUP_URL}`, credentials).then(function (response) { 

     return { 
      type: LOGIN_SUCCESS, 
      payload: true 
     }; 


    }) 
    .catch(function (error) { 

     return { 
      type: LOGIN_FAIL, 
      payload: false 
     }; 


    }); 


} 

Answer 1

您的動作創建者不會返回任何東西 - 您的返回語句位於promise回調的範圍內，而不是周圍的函數。但是，這有點不重要 - 即使你確實從動作創建者那裏回覆了諾言，Redux也不知道該怎麼處理它！

爲了執行異步操作，您需要使用庫，如redux-thunk或redux-promise。我不打算詳細介紹如何設置這些庫，因爲其回購站上的README文件做得更好，但以下是一些如何使用它們的示例。

終極版，形實轉換可以讓你派遣一個函數，反過來訪問dispatch，像這樣：

export function loginLookUp(credentials) { 
    // This would look a lot cleaner if you used an ES2015 arrow function 
    return function (dispatch) { 
     const request = axios.post(`${LOGINLOOKUP_URL}`, credentials).then(function (response) { 
      dispatch({ 
       type: LOGIN_SUCCESS, 
       payload: true 
      }); 
     }) 
     .catch(function (error) { 
       dispatch({ 
        type: LOGIN_FAIL, 
        payload: false 
       }); 
     }); 
    } 
} 

這是異步的行動得到一樣簡單，並且it's how the official Redux tutorial will teach you to do it - 確保給那些章節閱讀，這真的是有幫助的東西！

終極版-承諾，在另一方面，可以讓你發送一個承諾作爲有效載荷操作：

export function loginLookUp(credentials) { 
    return { 
     type: LOGIN, 
     // Payload must be a promise! 
     payload: axios.post(`${LOGINLOOKUP_URL}`, credentials) 
    }; 
} 

不是立即被傳遞到減速的動作，它將使用.then()等待承諾在有效載荷中完成。然後，它將以兩種形式之一來發送動作。

如果承諾解決，行動將設置爲解決值的有效載荷進行布控，像這樣：

{ 
    type: LOGIN, 
    payload: // The response from the server 
} 

如果承諾失敗，則操作將設置爲拒絕的有效載荷被分派值和error屬性設置爲true，像這樣：

{ 
    type: LOGIN, 
    payload: // The error object, 
    error: true 
} 

這些絕不是做事情的唯一途徑 - 有無數的異步操作庫，因此，如果這些都讓你驚恐地退縮，肯定有很多是事端g否則會適合你（我聽到人們比我更聰明的關於redux-saga的好東西，但我自己無法理解）！

談到傳說，這個答案結束了比我想要的方式更長。希望它爲你清除了一些東西！