使用 Redux 从 React 组件进行 api 调用答案

【问题标题】：Making api calls from React component using Redux使用 Redux 从 React 组件进行 api 调用
【发布时间】：2018-11-28 19:38:52
【问题描述】：

当我使用 React 和 Redux 时，有一个问题让我很困扰。在我的应用程序中，我有自己的 API 中间件，用于使用普通操作进行 api 调用。它在引擎盖下进行 fetch 并返回 Promise，效果很好。但有时我有一种感觉，我想获得的数据不适合我的商店，不应该在那里。它只对单个组件很重要，不应该是全局的。

我的意思是什么，这就是我通常进行数据获取的方式。我制作了这样的动作创建器：

dispatch(apiCall({ url, type, typePrefix })

typePrefix 是请求、成功和失败操作的前缀，例如。 ${typePrefix}/REQUEST。之后，我可以在 reducer 中对这些操作做出反应。

现在，有时我想在我的提供程序/容器组件中创建fetch，将其保存到本地状态并将其传递给演示组件。当我使用 Redux 时，thunk（或 sagas）是执行数据获取的唯一方法，还是有时将获取的数据保留在本地是否可以？我没有发现任何关于它的问题。

【问题讨论】：

没有一般的答案，但是 IMO Redux 存储是用于需要在组件之间共享的状态——如果只有单个组件或小树需要数据，就没有理由在整个应用程序之间共享数据或者必须对与该数据相关的“事物”采取行动（例如它是否已被检索到）。与 Redux 相同的原因，拥有组件状态与将 Redux 状态映射到 props 仍然是有意义的。也就是说，在商店中提供它意味着您可以用它做您最初没有预料到的事情。
是的，本地状态是必不可少的，我从来没有觉得我必须将所有东西都放在商店中，但如果动作创建者是一种执行副作用的方式，那么它的含义应该是商店更新。正如我所说，有时我只想获取数据但不存储它，我想知道已经使用 Redux 是否可以。
数据的来源并不重要，例如，对于 UI 组件的本地状态，没有理由使用 Redux，即使它可能正在使用来自 Redux 存储的数据。这可以很容易地扩展到外部获取的资源。最终，它总是归结为在您的应用程序上下文中有意义的内容，并且没有理由以后不能更改。 Redux 不是“全有或全无”，它是“按需”，没有理由不混合状态。

标签： javascript reactjs redux

【解决方案1】：

引用 Redux 的一位创建者的话：

我想修正这一点：在你对 vanilla React 有问题之前不要使用 Redux。

如果您觉得 Redux 很麻烦，则主要需要它：

在嵌套的子节点之间传递相同的状态。
跨多个组件维护相同信息的多个副本。

但如果你觉得 redux 只是让事情变得复杂，你应该坚持使用原版 React 和 JS。

更多信息可以阅读here。

【讨论】：

我认为我在理解或使用 Redux 方面没有问题。我确实遇到过在多个组件之间共享获取的数据的情况，但是正如我在问题中提到的那样 - 将“未共享”状态保留在存储中是不好的。我也认为这不是一个棘手的问题。
它不是nooby。我从来没有这么说过。如果您觉得某些信息可以在组件内进行本地化，那很好。 Redux 并不是要存储每个 API 的响应。稍后，如果您觉得数据在几层之间传递，您可以随时将其移至 redux。
这更像是我所期望的答案，谢谢 :) 我认为我提到的问题也应该在 Redux 文档的某个地方指出。不知道其他人是否也遇到了同样的问题。
这里稍微提一下：redux.js.org/faq/general#when-should-i-use-redux。但更详细的文章是由 Dan 写的。上面有链接。
但这两个链接是0-1选项，你可以使用Redux，也可以不使用。我的观点是我发现 Redux 在我的应用程序中很有用，但有时我觉得我不应该调用 action creator 来获取我的数据、存储它并通过 connect 传递它。有时我想让它只是 Vanilla React 的方式。这就是我的观点，我应该使用它还是离开它不是问题。