代碼塊-常見業務場景

此文用於我的總結、收集平常工做中常見的業務代碼,以此提升自身效率

場景reactdvareact


發送兩個相互依賴的異步請求

  • dva中,採用的是基於redux-saga的異步解決方案,將異步請求所有收集到effects中進行統一處理。所以:
    • 咱們能夠在獲取到一個yield call(fetchDataAsync, payload)的結果res後,以此respayload,繼續put另外一個異步action
    • 或者是乾脆在後面直接跟yield call(fetchDataAsyncAnother, payload)
    • dispatch第一個異步action時,除了常見的typepayload外,咱們還能夠傳入一個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組成的數組,在另外一個總的對象數組裏查找對應數據。常見於各類下拉框聯動。

好比一個"項目"下拉選擇器和一個「項目參與者」下拉選擇器;在沒有選擇項目的時候,加載全部的參與者;而一旦選擇了某個項目,則只顯示對應的參與者。其實引伸一下,就是一個數組求交、並集的問題redux

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}]
複製代碼
相關文章
相關標籤/搜索