如何使用 redux saga 从 api 获取中获取特定字段答案

【问题标题】：How to get specific fields from an api fetch using redux saga如何使用 redux saga 从 api 获取中获取特定字段
【发布时间】：2023-03-11 00:18:02
【问题描述】：

我在一个 redux-saga 应用程序中提出了 api 请求，但我得到了很长的响应。

我的传奇是这样的：

export function* fetchWeatherByCityNameSaga(action) {
  try {
    const response = yield call(api.getWeatherByCityName, action.payload.city);
    yield put({ type: FETCH_WEATHER_SUCCESS, payload: response });
  } catch (err) {
    yield put({ type: FETCH_WEATHER_START, payload: err });
  }
}

export function* watcherSagas() {
  yield all([
    yield takeLatest(FETCH_WEATHER_START, fetchWeatherByCityNameSaga),
  ]);
}

在有效载荷中我有这样的东西：

{…}
    city: Object { id: 745042, name: "Istanbul", country: "TR", … }
    cnt: 40
    cod: "200"
    list: Array(40) [ {…}, {…}, {…}, … ]
    message: 0

现在我要做的是基于这个响应对象创建一个新对象并将这个新对象放入存储中。我不想存储无用的数据。我应该在哪里做？在 fetchWeatherByCityNameSaga() 中还是在 actionCreators 中还是在组件本身中？

【问题讨论】：

I dont want to useless data in store. 是什么意思？
例如列表是 40 项数组。我只需要其中的第一个。从回复中我只需要city.country 和list[0].weather.main
应该在行动中完成。 fetchWeatherByCityNameSaga

标签： reactjs react-redux redux-saga

【解决方案1】：

您应该创建一个新函数，该函数将响应作为参数并返回一个仅包含您需要的数据的新对象。

假设你得到一个对象作为响应

例如

 function transformWeatherData(response) {
   // make an object with only the data you need
   const data = {
     cityName: response.city.name,
     countryName: response.city.country,
     weatherData: response.list[0].weather.main
   }

   return data;
 }

并在 fetchWeatherByCityNameSaga 中调用函数

 export function* fetchWeatherByCityNameSaga(action) {
  try {
    const response = yield call(api.getWeatherByCityName, action.payload.city);

    // call the transform function here
    const result = yield call(transformWeatherData, response);

    // send the result as payload
    yield put({ type: FETCH_WEATHER_SUCCESS, payload: result });

  } catch (err) {
    yield put({ type: FETCH_WEATHER_START, payload: err });
  }
}

如果您已经提前知道响应中需要哪些字段，我只会推荐这种转换数据的方式。如果您不知道，请将整个响应保留在商店中。

【讨论】：