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
}

我应该做的还原方式

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，理想情况下不应受此类逻辑更改的影响。{1}}

Redux Thunk vs在反应组件中进行api调用

1 个答案: