反应中多个异步调用的单个减速器，redux

Question

我从 React js 中的一个组件多次调用单个帖子请求，如下所示：

Object.keys(data).map(account => {
    const accountRequest = {
        accountNo: account.accountNo,
        id : account.id
    }
    return this.props.requestAccountDetails(accountRequest)
}

requestAccountDetails 是容器中用 const mapDispatchToProps 编写的函数：

const mapDispatchToProps = (dispatch)  => {
    return {
        requestAccountDetails : (accountDetails)=> {
            dispatch(requestAccountDetailsInformation(accountDetails));
        }
    }
}

requestAcountDetailsInformation 是在 action creator 中编写的 action，它调用 redux-saga，根据帐户数量异步调用多次。 因此，如果说帐户数为 5 ，则我调用的 post 请求是使用 redux-saga 异步调用的 5 次。

问题是当我的 post 请求成功返回时，我再次调用调用 reducer 的成功操作，并将数据提供给我的组件。但是由于调用了 5 次，它调用了相同的成功函数和相同的 reducer。它覆盖了以前的调用结果。 示例：如果我的第一个请求返回结果，第二个请求返回结果。我的第一个请求结果在减速器中被覆盖。

任何人都可以帮助我如何在单个减速器中维护所有 5 个请求的结果。

Answer 1

您需要在数组中添加结果而不是覆盖其中。 假设你有状态。

const state = {
accountDetails =[]
}

在成功调用的减速器中，您可以在 accountDetails 中推送新数据并更新状态。

  reducer(initialState=state, action)
    switch(action.type){
      ....
    case Authsuccess: return { ...initialState,
                                accountDetails : [ 
                                ...initialState.accounDetails, 
                                 action.payload.accountInfo
                                 ],
                              }