reactjs - 在 React-Redux 中转换 API 数据 : Action or Reducer

Question

我有一个天气应用程序，API 数据有不同的格式，因此我创建了一个方法对象，我可以将该数据转换为英制格式，并将时间从 UTC 转换为 GMT。

现在我已经在我的 reducer 中的数据上调用了这些方法。

问题:这样“可以”吗？还是应该在将有效负载传递到 reducer 之前在相应的操作中完成转换？只是好奇这样的事情的最佳实践是什么。

仅供引用:我使用 axios 作为基于 Promise 的 HTTP 客户端和 redux-promise-middleware、redux-lodger 和 redux-promise 作为我在商店中的中间件。

Action 创建者:

export const fetchCurrentWeather = (city) => {
const url = `${CURRENT_ROOT_URL}&q=${city},us`;
const promise = new Promise((resolve, reject) => {
   axios.get(url)
     .then(res => resolve(res.data))
     .catch(err => reject(err));

});
return {
  type: FETCH_CURRENT_WEATHER,
  payload: promise
  };
};

reducer :

export default(state = initialState, action) => {
const data = action.payload;
switch (action.type) {
    case `${FETCH_CURRENT_WEATHER}_PENDING`:
        return {};
    case `${FETCH_CURRENT_WEATHER}_FULFILLED`:
    const prefix = 'wi wi-owm-';
    const code = data.weather[0].id;
    const icon = prefix + code;
        return {
            ...state,
            weatherData: {
              humidity: data.main.humidity,
              icon,
              name: data.name,
              pressure: unitConverter.toInchesHG(data.main.pressure),
              sunrise: unitConverter.toGMT(data.sys.sunrise),
              sunset: unitConverter.toGMT(data.sys.sunset),
              temp: unitConverter.toFarenheit(data.main.temp),
              winddir: unitConverter.toCardinal(data.wind.deg),
              windspd: unitConverter.toMPH(data.wind.speed)
            },
            isFetched: true
        };
    case `${FETCH_CURRENT_WEATHER}_REJECTED`:
        return {
            ...state,
            isFetched: true,
            err: data
        };
    default:
        return state;
  }
};

Answer 1

您可以在三个位置有效地处理原始数据:

• 组件的 render() 函数

  这通常不是一个好主意，因为这意味着每次渲染组件时都会处理数据。如果您使用像 reselect 这样的包您可以通过缓存来缓解性能问题，但即使如此，实际的代码例如排序或过滤应保留在mapStateToProps()中。

• 在 reducer 中

  对于在 reducer 中处理数据可以提出更好的案例，但我认为，出于清晰性和关注点分离的原因，这仍然不是最好的地方。 reducer 的工作非常明确 - 承认操作并将先前的状态与操作结果合并，其他任何事情都会模糊责任和可测试性的界限。

• Action 重击

  在我看来， Action thunk 是一次性数据转换的正确位置，例如导入的原始数据的标准化/转换。它不仅是一个典型的明确的操作子任务(例如获取天气数据 -> 将摄氏温度转换为华氏温度)，而且还具有不存储无用数据的额外优势，即使是暂时的状态数据。

  引用丹·阿布拉莫夫的话:

  ... action objects [are] minimal representations of what happened and state objects [are] minimal representations of what’s necessary for rendering right now.

最后说明 - 选择器

虽然我上面说过该组件不是执行原始数据转换的好地方，但实际上我认为在 redux-state 中存储原始数据是有争议的并使用像 reselect 这样的包根据需要通过选择器呈现标准化或计算值。

实现此目的的一种方法是使用一个选择器函数，对原始数据的定义部分执行数据标准化。使用reselect包中，此转换将被缓存，因此仅执行一次。它的优点是仅根据需要延迟转换数据。