Redux Actions必須是普通對象。使用自定義中間件進行異步操作

Question

我收到錯誤「Redux操作必須是普通對象，使用自定義中間件進行異步操作。」用下面的代碼。

export const getFriends =() => async(): Action => { 

    const requestConfig = { 
    httpMethod: 'GET', 
    version: 'v2.7', 
    }; 
    let hasMore = false; 
    let friends = []; 

    do { 
    const infoRequest = new GraphRequest(
    '/me/friends', 
    requestConfig, 
    (error, result) => { 
     if (error) { 
     alert('Error fetching data facebook friends'); 
     } else { 
     result.data.forEach((value) => { 
      friends.push(value) 
     }); 
     if (result.paging && result.paging.next) { 
      hasMore = true; 
      requestConfig.parameters.after = result.paging.cursors.after; 
     } else { 
      hasMore = false; 
     } 
     } 
    }); 
    await new GraphRequestManager().addRequest(infoRequest).start(); 
    } while (hasMore); 
    return { 
    type: 'GET_FRIENDS', 
    payload: friends // this is empty because there is no await on GraphAPI 
    }; 
}; 

如果我刪除了異步和等待，朋友返回是空的，因爲函數調用返回之前GraphAPI調用返回

export const getFriends =() =>(): Action => { 

    const requestConfig = { 
    httpMethod: 'GET', 
    version: 'v2.7', 
    }; 
    let hasMore = false; 
    let friends = []; 

    do { 
    const infoRequest = new GraphRequest(
    '/me/friends', 
    requestConfig, 
    (error, result) => { 
     if (error) { 
     alert('Error fetching data facebook friends'); 
     } else { 
     result.data.forEach((value) => { 
      friends.push(value) 
     }); 
     if (result.paging && result.paging.next) { 
      hasMore = true; 
      requestConfig.parameters.after = result.paging.cursors.after; 
     } else { 
      hasMore = false; 
     } 
     } 
    }); 
    new GraphRequestManager().addRequest(infoRequest).start(); 
    } while (hasMore); 
    return { 
    type: 'GET_FRIENDS', 
    payload: friends // this is empty because there is no await on GraphAPI 
    }; 
}; 

Answer 1

的錯誤意味着什麼這聽起來像。 Redux期待一個簡單的對象。我看到標籤爲redux-thunk的問題。如果您正在使用redux-thunk，也許您沒有正確設置中間件的商店。如果你沒有使用redux-thunk，那麼我會推薦它作爲調度異步操作的前往庫。

這會給你很好的洞察關於調度不是普通對象的redux動作。 How to dispatch a Redux action with a timeout?

編輯：你錯過了實際的調度，並試圖簡單地返回普通的對象...需要返回一個調度...像下面的東西（沒有測試，但應該讓你關閉）：

export const getFriends =() => { 
     return (dispatch) => { 
     const requestConfig = { 
      httpMethod: 'GET', 
      version: 'v2.7', 
     }; 
     let hasMore = false; 
     let friends = []; 

     do { 
      const infoRequest = new GraphRequest(
      '/me/friends', 
      requestConfig, 
      (error, result) => { 
       if (error) { 
       alert('Error fetching data facebook friends'); 
       } else { 
       result.data.forEach((value) => { 
        friends.push(value) 
       }); 
       if (result.paging && result.paging.next) { 
        hasMore = true; 
        requestConfig.parameters.after = result.paging.cursors.after; 
       } else { 
        hasMore = false; 
        return dispatch({ 
        type: 'GET_FRIENDS', 
        payload: friends    
        }); 
       } 
       } 
      }); 
      await new GraphRequestManager().addRequest(infoRequest).start(); 
     } while (hasMore); 
     } 
    };