0

ページをロードすると同時に redux saga を使用して非同期呼び出しを実行しようとしていますが、loadPositions() のみが呼び出されています。誰かが理由を知っていますか？競合状態に関係していると思います。私を修正してください。

const fetchPositions = () => {
  return fetch(POSITIONS_API_ENDPOINT).then(function (response) {
    return response.json().then(function (results) {
      return results.map(function (p) {
        return {
          position: p.position,
          platformId: p.platform_id
        }
      })
    })
  })
};

const fetchBanners = () => {
  return fetch(BANNER_API_ENDPOINT).then(function (response) {
    return response.json().then(function (results) {
      return results.map(function (p) {
        console.log(p)
        return {
          banner_id: p.banner_id,
          type: p.image.type,
          width: p.image.width
        }
      })
    })
  })
};


export function* loadBanners() {
  try {
    const banners = yield call(fetchBanners);
    yield put({type: "BANNERS_LOADED", banners})
  } catch (error) {
    yield put({type: "BANNERS_LOAD_FAILURE", error: error})
  }
}

export function* loadPositions() {
  try {
    const positions = yield call(fetchPositions);
    yield put({type: "POSITIONS_LOADED", positions})
  } catch (error) {
    yield put({type: "POSITION_LOAD_FAILURE", error: error})
  }
}


export function* rootSaga() {
  yield [
    loadBanners(),
    loadPositions()
  ]
}
4

1 に答える 1

0

これを試して：

  • ON_LOAD_STARTアクションを起動して、初​​期の並列読み込みを開始します
  • yield []構文を使用してすべてのリクエストを並行して行い、結果データで適切なアクションを起動します。

ルート サガ、すべてのサガを構成します。

export default function* rootSaga() {
  yield fork(watchOnLoad);
}

ウォッチャー サガ、ON_LOAD_STARTワーカー サガをキックする前にアクションを待機:

function* watchOnLoad() {
  // takeLatest will not start onLoad until an action with type
  // ON_LOAD_START has been fired.
  yield* takeLatest("ON_LOAD_START", onLoad);
}

ワーカー サーガは、実際にはすべてのリクエストを並行して行い、関連する結果データを使用して成功またはエラー アクションを起動します。

export function* onLoad() {
  try {
    const [banners, positions]  = yield [
      call(fetchBanners),
      call(fetchPositions)
    ]
    yield put({type: "ON_LOAD_SUCCESS", banners, positions})
  } catch (error) {
    yield put({type: "ON_LOAD_ERROR", error})
  }
}
于 2016-07-21T23:18:54.777 に答える