单个减速器用于反应,redux 中的多个异步调用
single reducer for multiple async calls in react ,redux
我正在从 React js 中的组件多次调用单个 post 请求,如下所示:
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 的成功操作,并且数据被提供给我的 component.But 因为调用了 5 次并且它正在调用相同的成功函数和相同的 reducer.It 会覆盖之前的调用结果。示例:如果我的第一个请求 returns 结果,第二个请求 returns result.My 第一个请求结果在 reducer 中被覆盖。
任何人都可以帮助我如何在单个减速器中维护所有 5 个请求的结果。
您需要将结果添加到数组中而不是覆盖它。
假设你有状态。
const state = {
accountDetails =[]
}
在 reducer 中成功调用你可以在 accountDetails 中推送新数据并更新状态。
reducer(initialState=state, action)
switch(action.type){
....
case Authsuccess: return { ...initialState,
accountDetails : [
...initialState.accounDetails,
action.payload.accountInfo
],
}
我正在从 React js 中的组件多次调用单个 post 请求,如下所示:
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 的成功操作,并且数据被提供给我的 component.But 因为调用了 5 次并且它正在调用相同的成功函数和相同的 reducer.It 会覆盖之前的调用结果。示例:如果我的第一个请求 returns 结果,第二个请求 returns result.My 第一个请求结果在 reducer 中被覆盖。
任何人都可以帮助我如何在单个减速器中维护所有 5 个请求的结果。
您需要将结果添加到数组中而不是覆盖它。 假设你有状态。
const state = {
accountDetails =[]
}
在 reducer 中成功调用你可以在 accountDetails 中推送新数据并更新状态。
reducer(initialState=state, action)
switch(action.type){
....
case Authsuccess: return { ...initialState,
accountDetails : [
...initialState.accounDetails,
action.payload.accountInfo
],
}