最近在用react+redux开发webapp,其中在处理ajax这块,一直存在疑惑。
需求是:
其中采用标准fetch发送ajax,异步采用redux-thunk 处理异步promise。
middleware :
在组件A中。循环props.发送请求:
然后通过componentWillReceiveProps 获取ajax 的回调:
现在问题,setSate的结果是ajax回调的最后一次结果,最终渲染的列表都是最后一个ajax返回的那个值,不是对应的每个item的值。
不知道大家写redux的时候是怎么处理这种情况的。感觉redux在处理多个ajax请求的时候比较蛋疼,不像传统的写法,循环后,异步回调后,就是对应的每一步的结果了。
求教!
里面的promise.then
建议改成Promise.all().then
这个应该通过action来解决。
我想你的场景是这样的,获取数据集合ListA,针对集合中的每一项发送请求获取更多数据,组成集合ListB。
ListB才是view真正想要的数据。
针对这种情况,action中应该像下面的这样
假设有一个fetchData的async action,他的payload是个promise,那剩下的其实都是对promise的处理了。
伪代码
// action
fetchData = (dispatch) => dispatch({payload: fetchListA.then(fetchMore)})
// promise
fetchListA = () => fetch(...)
// more是个数组,包含每个item的更多信息
fetchMore = (listA) => Promise.all(listA.map(item => fetchItem(item)))
.then(more => merge(listA, more))
fetchItem = (item) => fetch(...)
merge = (list, more) => {...}
如果有必要,获取ListA和更多信息都可以作成独立action进行dispatch