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

Question

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

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

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

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

1. 发送动作以打开模式
2. 发送动作以提交带有数据的表单
3. 发送POST请求以提交表单，将redux加载状态设置为true
4. 如果成功，则将redux加载状态设置为false，将“模式打开”状态设置为false

关注点：从概念上讲，当功能在原则上特定于模态本身时，会将大量功能放在redux中。

选项2：将请求状态存储在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钩子和redux状态之间的强耦合以及状态如何从一种转换为另一种。

选项3：在组件中提交请求，完全不要使用redux。

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

1. 打开模态，它将某些本地“ modalOpen”状态更改为true
2. 调用获取并提交发布请求
3. 在.then（）回调中，检查请求是否成功。如果是这样，请将modalOpen状态设置为false

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

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

Answer 1

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

Answer 2

我会选择选项1，如果您的应用程序足够大，因为从存储中获取数据可能会出现在许多页面中。这样，您可以重用模式。 但是，如果应用程序不是很大，我可能会使用option 3，因为正如@seyi_adel所说，它可能更方便直接。

Answer 3

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