Redux Thunk vs 在 React 组件中调用 api

Question

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

MyComponent.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，这在理想情况下不应受到此类逻辑更改的影响。

Redux Thunk vs 在 React 组件中调用 api

Redux Thunk vs Making api call in react component

react-native

redux

redux-thunk