React + Redux App：通过 Redux 操作调用 API Vs 直接调用 API

Posted 2023-02-22

【中文标题】React + Redux App：通过 Redux 操作调用 API Vs 直接调用 API

【英文标题】：React + Redux App: Calling API through a Redux action Vs Calling an API directly

【发布时间】：2018-09-20 19:44:30

【问题描述】：

我正在开发一个 React+Redux 应用程序。我通过 Redux 操作调用 API 并将响应数据存储在 Redux 状态中。但有一种情况，我不必将 API 响应数据存储在 Redux 存储中。

所以问题是，是否有任何正当理由通过以下方式调用 API Redux 操作或者我应该直接调用 API，因为我不存储 Redux store 中的响应数据？

【参考方案1】：

接受的答案很好地解释了可以从 API 调用发起的场景。为了更好的用户体验，我们总是显示一些spinner 或busy sign 来通知用户正在发出请求，但尚未完成。 API 响应 可能不会改变状态，但是为了让用户知道某些任务正在后台进行，我们通常更新store（用于全局访问）或state（用于组件级别访问），具有 isFetching 之类的值或任何有意义的值。

所以，这取决于开发人员，他/她是想显示一些busy 符号还是静默执行 API 请求。此外，如果他们想显示busy 符号，他们应该决定应用程序的哪个部分应该知道API 调用。如果仅限于组件级别，则无需在actions中进行调用，否则，对于全局级别，是的，它应该在action中。

【讨论】：

感谢您花时间回答！

【参考方案2】：

这取决于您要拨打什么样的电话，以及是谁担心的。 以下是几种情况：

这是跟踪某事的单向调用吗？您可以触发在middleware 中获取的操作。这是发送分析的好案例。 这不必存储在 Redux 的存储中。

这是一个调用，您的应用程序的某些其他部分需要此数据吗？那么这是在 Redux Store 中进行更新的一个很好的用例，因此其他组件在阅读此内容并使用道具时决定渲染什么等等。

这是一个只涉及一个组件或独立部分的调用吗？您可以在 componentDidMount 中的组件内进行此调用，因为这与其他任何人无关

或者看看Sagas，他们观察所有被调度的动作，并以干净的方式决定如何处理它们。

【讨论】：

感谢您花时间回答！

【参考方案3】：

为了统一起见，你应该始终遵循 redux 的方式，即使所有的响应都没有存储在 Redux 中。如果您不使用 API 调用的响应，这也是一个问题，为什么要进行调用。这个论点是反直觉的。如果您以某种方式使用响应，则最好使用 Redux 方式。建议始终存储对 Redux 调用的响应并使用它，我确信您正在调用 API 以对 UI 执行一些操作。

【讨论】：

感谢您花时间回答！