此文用于个人总结、收集日常工作中常见的业务代码,以此提高自身效率
场景
react
和dva
发送两个相互依赖的异步请求
- 在
dva
中,采用的是基于redux-saga
的异步解决方案,将异步请求全部收集到effects
中进行统一处理。因此:- 我们可以在获取到一个
yield call(fetchDataAsync, payload)
的结果res
后,以此res
为payload
,继续put
另一个异步action
; - 或者是干脆在后面直接跟
yield call(fetchDataAsyncAnother, payload)
; - 在
dispatch
第一个异步action
时,除了常见的type
、payload
外,我们还可以传入一个callback
,在获取到请求的结果res
后,使用yield
调用该callback
,并将res
当作参数传入,在callback
中,发起另一个异步action
,如下:
- 我们可以在获取到一个
// page.js
fetchData = () => {
const { dispatch } = this.props
dispatch({
type: 'page/fetchData',
payload: { pageNumber: 1, pageSize: 30 },
cb: (list) => {
// fetchAnotherData
},
})
}
// models/page.js
effects: {
*fetchData({ payload }, { call, put }) {
const res = yiela call(fetchFn, payload)
const arr = Array.isArray(res.content) ? res.content : []
yield put({
type: 'changeStore',
payload: {
arr
}
})
yield cb && cb(arr)
},
}
复制代码
页面某些内容发生改变后重新发送异步请求获取数据
- 随着
React
版本的更新,已经不推荐在componentWillReceiveProps
里发送异步请求了。目前个人的编码中,如有类似的需求场景,已全部转移到componentDiaUpdate
中重新发送异步请求
通过某个id
组成的数组,在另一个总的对象数组里查找对应数据。常见于各种下拉框联动。
比如一个"项目"下拉选择器和一个“项目参与者”下拉选择器;在没有选择项目的时候,加载所有的参与者;而一旦选择了某个项目,则只显示对应的参与者。其实引申一下,就是一个数组求交、并集的问题
const projectListId = [1]
const memberList = [
{projectId: 1, name: '小明', id: xxx},
{projectId: 1, name: '小黑', id: xxx},
{projectId: 2, name: '小黄', id: xxx},
{projectId: 3, name: '小红', id: xxx},
{projectId: 4, name: '小白', id: xxx}
]
const res = memberList.filter(member => projectListId.indexOf(member.projectId) > -1)
console.log(res)
// [{projectId: 1, name: '小明', id: xxx}, {projectId: 1, name: '小黑', id: xxx}]
复制代码