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