Reduxアクションはプレーンなオブジェクトでなければなりません。非同期アクションにカスタムミドルウェアを使用する

Question

「非同期アクションにはカスタムミドルウェアを使用してください」というエラーが表示されます。以下のコードを使用してください。 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

を返す前関数呼び出しが返されたので、私は非同期を削除して待っていた場合は、友人が返さ

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

は空です。 Reduxは普通のオブジェクトを期待しています。私はredux-thunkとタグ付けされた質問を見る。 redux-thunkを使用している場合は、ミドルウェアを正しく設定していない可能性があります。 redux-thunkを使用していない場合は、非同期アクションをディスパッチするためのgo-toライブラリとしてお勧めします。

これは、単純なオブジェクトではない控除アクションのディスパッチに関する優れた洞察を提供します。 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); 
     } 
    };