Redux Thunk 与在 React 组件中进行 api 调用

Question

我想知道我在 ReactNative/Redux 应用程序中所做的是否是错误的。这就是我处理异步操作的方式。

我的组件.js

componentDidMount() {
  fetch('https://www.mywebsite.com')
  .then(data => this.props.handleApiSuccess(data)) // injected as props by Redux
  .catch(err => this.props.handleApiError(err)); // injected as props by Redux
}

我可能应该做的 redux-thunk 方式

export const handleApiCall = () => dispatch => {
  fetch('https://www.mywebsite.com')
  .then(data => dispatch(handleApiSuccess(data)))
  .catch(err => dispatch(handleApiError(err)));
}

第一部分的做法有什么问题吗？

Answer 1

在错误方面没有错：代码将工作并达到其目的。

但在设计方面它有一个巨大的缺陷：耦合。Components随着您的应用程序的增长，合并您的获取逻辑可能会导致复杂化。

如果您的获取方式发生变化，例如您将决定通过 websockets 与服务器通信，该怎么办？如果您处理服务器响应的方式发生变化，即 handleApiError 将不得不用其他东西替换怎么办？如果您决定在应用程序的不同部分重复使用相同的获取怎么办？

在所有这些情况下，您都必须更改现有的Components，理想情况下不应受到此类逻辑更改的影响。