如何让 redux-saga 生成器“执行”操作并返回结果？答案

【问题标题】：How do I get a redux-saga generator to 'take' an action and also return the results?如何让 redux-saga 生成器“执行”操作并返回结果？
【发布时间】：2019-07-25 21:25:54
【问题描述】：

fetchBooks 生成器函数 takes 操作并根据指定的类别获取书籍。

function* fetchBooks() {
  while (true) {
    const { payload:{ bookCategory }} = yield take(FETCH_BOOKS);
    // receive and perform external fetch
    const books = fetchMyBooks(bookCategory);

    !books
      ? yield put({ type: FAILURE })
      : yield books
  }
}

在另一个生成器函数中，我试图像这样调用fetchBooks

function* handleSomethingAndThenFetch() {
  // ...doing soemthing... then
  const books = yield put({ type: fetchBooks, payload:{ 'FICTION' }});

}

使用fetchBooks 生成器函数，我如何返回书籍的值？我试过用这个：

const books = yield call(fetchBooks, 'FICTION');

但我试图避免更改 fetchBooks 图书功能。还有其他方法吗？

【问题讨论】：

标签： generator redux-saga side-effects

【解决方案1】：

这是不一致的：

!books
      ? yield put({ type: FAILURE })
      : yield books

它应该是这样的：

!books
      ? yield put({ type: FAILURE })
      : yield put({ type: FETCH_BOOKS_SUCCESS, books})

那么你的handleSomethingAndThenFetch 会变成：

function* handleSomethingAndThenFetch() {
  // ...doing soemthing... then
  yield put({ type: fetchBooks, payload:{ 'FICTION' }});

  const {failure, success} = race({
    success: take(FETCH_BOOKS_SUCCESS),
    failure: take(FAILURE)
  });

  if (success) {
    const { books } = success
    // do something with fetched books
  } else if (failure) {
    // Handle failure
  }
}

这一切都假设您真的希望 fetchBooks 被公开并收听 FETCH_BOOKS 操作。恕我直言，更好的方法是将 API 调用部分包装在一个单独的 saga 中，该 saga 不连接到 redux 操作。 fetchBooks变成：

function* fetchBooks(bookCategory) {
  return yield call('fetchMyBooks', bookCategory);
}

然后直接从您的其他 sagas 中使用该 saga：

function* handleSomethingAndThenFetch() {
  // ...doing soemthing... then
  const books = yield fetchBooks('FICTION');

简单得多。

【讨论】：