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

Question

我最近开始在 React 项目中使用 Redux-Saga，因为它对我来说是新的，我想了解它是如何工作的。我也开始使用 Formik，因为它在 React 应用程序中管理表单的流行程度似乎超过了 Redux-Form。现在，我理解了 Dan Abramov 的基本原理，即“将 React 用于对全局应用程序无关紧要且不会以复杂方式发生变异的短暂状态”。

但这似乎与SOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILURERedux-Saga 文档中的布局模式不一致。例如，如果我有一个表单，它调度了一个 saga “采取”来执行异步请求的操作 onSubmit，我看不到有一种方法可以让我的表单了解该请求的状态而不将其存储在 Redux 状态中的某个地方（我们想要避免的确切反模式）。我可以想象的另一种选择是在表单提交处理程序中执行请求，而不是将其委托给 saga，但这让我想知道，Redux-Saga 的意义何在？

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

编辑：仅供参考，redux-saga repo 上的这个 GitHub 问题似乎与我的问题最相关，虽然那里写了很多，但似乎并没有达成一致的最佳实践。

这个reddit线程也涉及到这个话题，但是和线程的OP类似，不知道为什么他在Redux Promise Listener中找到的解决方案没有被更广泛地采用？

标签： reactjsreduxredux-sagaformik

Answer 1

我可以想象的另一种选择是在表单提交处理程序中执行请求，而不是将其委托给 saga

正确，这足以处理文件上传。用于此操作将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 中的执行流程通过yield回应）。