请求完成后关闭模式的最佳方式是什么？

Question

上下文： 我想创建一个模式，让用户填写表单并提交。 POST 请求完成后，模式应关闭。有多个具有相似行为但形式内容不同的模式，因此我需要使其可重用。表单中的数据不会在前端应用程序的任何其他地方使用，只会存储在后端。

相关技术栈： react, redux, react-redux, redux-saga, no SSR

选项 1：在 redux 中存储模态和请求状态

打开并提交模态将触发以下事件序列：

1. 打开模式的调度操作
2. 发送带有数据的表单提交操作
3. 发送POST请求提交表单，设置redux加载状态为true
4. 如果成功，设置redux加载状态为false，"modal open"状态为false

关注点： 从概念上讲，在 redux 中放置了很多功能，而这些功能原则上是特定于模态本身的。

方案二：将请求状态存储在redux中，但将模态状态存储在组件中，请求成功时使用useEffect检测

打开并提交模态将触发以下事件序列：

1. 打开模式，将一些本地 "modalOpen" 状态更改为 true
2. 发送带有数据的表单提交操作
3. 发送POST请求提交表单，设置redux加载状态为true
4. 如果成功，设置redux加载状态为false
5. 在模态组件中，useEffect 钩子或 componentDidUpdate 函数检查状态是否从例如{loading: true, success: false} 到 {loading: false, success: true}，如果是，则将本地 modalOpen 状态设置为 false

关注点： useEffect hook 和 redux 状态之间的脆弱、容易出错、强耦合以及状态如何从一个状态转换到另一个状态。

方案三：在组件中提交请求，完全不用redux

打开并提交模态将触发以下事件序列：

1. 打开模式，将一些本地 "modalOpen" 状态更改为 true
2. 调用 fetch 并提交 post 请求
3. 在.then()回调中，检查请求是否成功。如果是，请将 modalOpen 状态设置为 false

顾虑： 看起来像一个反模式，因为我在组件本身中调用 fetch。

您推荐的方法是什么，为什么？

Answer 1

我会选择选项 3，因为这是最简单直接的方法。 React 文档有一个 example 从组件内部进行 API 调用，所以我不认为它是反模式。 您对选项 1 的担忧是完全正确的。模态状态应该本地化为模态，而不是存储在 Redux 中的全局状态。选项 2 类似于选项 1

Answer 2

如果您的应用程序足够大，我会选择选项 1，因为从商店获取数据可能会出现在许多页面中。这样，您可以重用模态。

但是，如果应用程序不是很大，我可能会使用 选项 3 因为正如@seyi_adel 所说，它可能更方便和直接。

Answer 3

选项 3 应该适合您的情况。可以在组件本身中使用 fetch，因为您只需要在那里使用它。如果您的应用程序中有跨多个组件使用的数据，则仅使用 redux 或任何全局状态管理。