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

Question

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

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

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

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

这是根 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 调用都抛出你的 sagas，但你只是犯了一个小错误

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";

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

How to use Redux Sagas to load single object?

javascript

reactjs

redux

redux-saga

react-redux