如何使用Formik和Redux-Saga处理表单状态

Question

我最近在一个React项目中开始使用Redux-Saga，因为它对我来说是新的，我想学习它的工作原理。我也开始使用Formik，因为它似乎已经使Redux-Form在React应用程序中的表单管理方面黯然失色。现在，我明白了丹·阿布拉莫夫（Dan Abramov）的理由，即“将React用于短暂状态，这种状态对应用程序而言并不重要，并且不会以复杂的方式进行更改”。

但这似乎与SOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILURERedux-Saga文档中的布局模式不符。例如，如果我有一个表单，该表单在一个由saga“执行”以执行异步请求的onSubmit上调度一些动作，则我看不到一种方法，可以在不将其存储在Redux状态的某个地方的情况下，让我的表单了解该请求的状态（我们要避免的确切反模式）。我可以想象的一种替代方法是在表单提交处理程序中执行请求，而不是将其委托给一个传奇，但这令我感到奇怪，Redux-Saga的意义何在？

请帮助填补我的理解空白。

编辑：仅供参考，redux-saga回购上的这个GitHub问题似乎与我的问题最相关，尽管那里写了很多文章，但似乎并没有达成共识的最佳实践。

这个reddit线程也处理该主题，但是与线程的OP类似，我想知道为什么他在Redux Promise Listener中找到的解决方案没有被更广泛地采用？

Answer 1

我可以想象的一种替代方法是在表单提交处理程序中执行请求，而不是将其委托给传奇

正确，这足以处理文件上传。用于redux-saga此操作将是一种过度杀戮。我相信人们应该努力为特定任务选择正确的工具。

但这让我想知道，这有什么意义redux-Saga？

redux-saga将异步操作视为同步操作的“流程管理器” 。有时代码的流程是预期的，不会有任何意外。尽管有时并非如此，因为副作用（例如 API 调用）会导致控制反转。因此，这给我们何时能得到答复带来了意外和不确定性。

我没有找到一种方法可以让我的表单了解该请求的状态，而不将其存储在 Redux 状态的某个地方

在这个演示中，我使用redux-saga来Formik控制两件事：

1. POST用于将文件发送到端点的API 调用。
2. uploading用于在用户等待文件上传时控制 UI 的标志

redux仅处理uploading，而其余值由formik和处理redux-saga，这有助于提供更好的用户体验（用户可以uploading了解 UI 中发生的情况）和开发人员体验（我们正在控制 saga 中的执行流程）通过yielding 响应）。