本文是关于使用npm包 @krzysztofkarol/redux-form-saga 的教程，您将学习如何通过安装该包并在Redux应用程序中使用它来简化Redux表单管理和异步处理。
什么是redux-form-saga？
redux-form-saga 是一个 Redux表单扩展，它简化了Redux表单的异步处理，使其更加简单和可维护。
Redux-form-saga 基于redux-form和redux-saga，并且非常适合需要异步处理的表单，例如异步验证、异步提交和异步表单数据获取等等。
如何安装 @krzysztofkarol/redux-form-saga
首先，您需要使用npm或yarn安装@krzysztofkarol/redux-form-saga。
npm install --save @krzysztofkarol/redux-form-saga
或者
yarn add @krzysztofkarol/redux-form-saga
如何将redux-form-saga添加到Redux应用程序中
导入必要的 Redux, redux-form, redux-saga 和 @krzysztofkarol/redux-form-saga 相应模块。
-- -------------------- ---- ------- ------ - ---------------- ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ - ------- -- ----------- - ---- ------------- ------ - -------- - ---- ---------------------------------- ----- ----------- - ----------------- ----- ------------ --- ----- -------------- - ----------------------- ----- ----- - ------------------------ --------------------------------- -----------------------------
使用redux-form-saga提交表单
Redux-form-saga 通过saga中间件处理Redux表单的异步提交。您可以通过以下操作来使用它：
- 定义您的Redux表单（验证、提交等）。
- 编写Redux-Saga worker来处理异步操作。
- Dispatch submit action 来提交表单
- 获取结果并触发其他Redux Action
例如，如果您需要异步验证和异步提交表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ - ------- - ---- --------------
------ ------------ ---- -----------------
------ - ------------ - ---- ----------------------------------
----- ----- - ---- -- -
------ --- ----------------- -- ------------------- -----
--
----- ------------------- - ----- -------- -- -
----- ------ - ---
----- ------------
-- -------------------------- ----------------------------------------------- -
------------ - ----- ----- ------- -- --- -------
-
-- -------------- -
----- -------
-
--
----- ----------------- - ----- -------- -- -
----- ------------
--------------------
------ - -------- ---- --
--
----- ---------- - ------- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ -----------------------------
------ ------------ ----------------- ------------ --
------
------------- --------------------------------------------
-------
--
--
----- ------------------- - -----------
----- -------------
--------- ------------------ -- ------ --------
-------------- -------------------- -- ----- ---------- --------
---------------- ---------- -- ----- ---------- ------
---------------
----- ------------------ - ---------- -- -
------ -
--------- -------- --------- ----- --
--------------------------- ------------------ ---------
--
--
------ ------- ------------- -----------------------------------------在上述示例中，我们首先定义了Redux表单并在Redux-Saga worker中编写了我们的异步操作：submitAsyncValidate和submitAsyncSubmit。
现在，我们可以使用submitAction将我们的异步操作与Redux表单连接起来。submitAction将触发异步操作，并处理我们的异步回调。在此处，我们的提交操作返回一个带有success属性的对象，并将在异步完成时打印到控制台上。
submitAction第一个参数为当前Redux表单的名称。 第二个参数为异步操作提供的回调函数，该回调函数将在异步执行完成时被调用。submitAction还可以传递其他参数，例如，我们在此处使用我们表单中的values对象。
请注意，在上述示例中，我们利用了redux-form提供的高阶组件reduxForm和连接redux-form和redux的connect方法。
结论
使用 @krzysztofkarol/redux-form-saga 包可以轻松解决Redux表单管理和异步处理问题。通过将sagas集成到Redux表单中，您可以使用异步操作进行验证和提交表单，并轻松处理和控制Redux表单行为。
此教程是如何使用该包的基本指南，提供了一个示例表单来说明并演示了如何集成提交操作。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609d81e8991b448dedb4