如何使用 Redux Sagas 加载单个对象？

Question

我一直在做一个 react 项目，使用 redux 和 sagas。 到目前为止，我能够创建一个结构，其中我的组件将调度一个请求列表的操作，然后 sagas 执行此操作并调用一个向后端发出请求的函数。然后我将这个列表存储在 redux 上，我的组件从 redux 读取列表。

现在我需要从后端加载一个对象。我考虑过不对那个请求使用 sagas，但我想使用 sagas 发出这个请求并将这个单个对象存储在 redux 上是有意义的。

我不知道如何让 rootSaga 函数接受以 'id' 作为参数的函数。

为了说明这个场景，这里有一些代码：

这是 root saga 函数，它会发出 API 请求并调用操作以存储在 redux 上

export function* loadEvent({ id: number }) {
  try {
    console.log('load single event');

    yield put(loadEventSuccess(event));
  } catch (err) {
    yield put(loadFailure());
  }
}

这是 rootSaga 函数，它应该获取我调度的操作并触发我的 saga 函数。问题是它不接受我用参数调用函数。就算可以，我也不知道怎么给它传参数。

export default function* rootSaga() {
  return yield all([
    takeLatest(EventsTypes.LOAD_EVENT_REQUEST, loadEvent),
  ]);
}

当然，在这之前我从我的函数组件中调度了一个动作。

让我感到困惑的另一件事是我一直使用的方法是否正常。我可以从我的功能组件发出这个请求并将数据存储在它的状态中。通过这样做，我不会涉及 redux 或 sagas。这有意义吗？

Answer 1

您的方法是完全正确的，因为您应该尝试让每个 api 调用都抛出您的 saga，但您只是犯了一个小错误

function* loadEvent({ payload }) {
const { id } = payload;
  try {
    const response = yield call(api.get, `localhost:4000/api/${id}`);
    yield put(loadEventSuccess(event));
  } catch (err) {
    yield put(loadFailure());
  }
};

您也不需要导出生成器函数，在我的示例中，我正在使用 axios 模拟 api get 调用。别忘了import { call } from "redux-saga/effects";