如何在Angular 4 + Redux设置中处理表单

我在我的最小的Angular 4样板中成功实现了@angular-redux/store和redux。我明白Redux循环背后的想法，但我很难让我通过简单的计数器增量按钮示例。如何在Angular 4 + Redux设置中处理表单

目前我已经构建了一个简单的登录表单作为一个组件，需要从我的API获取JWT令牌。我不想让它太复杂，所以现在我不想将表单状态存储在商店中，因为表单组件不影响其他组件，对吧？

所以，当我点击提交按钮时，我的login.component.ts将处理验证和http请求到我的API。但表单提交也是一个动作，所以Redux什么时候来这里玩呢？

来源

2017-08-12 user3411864

我认为使用redux作为登录表单（这与状态无关）并不合理，请使用反应形式，以便使用内置功能轻松验证输入：https：//angular.io/guide/reactive-forms – user3492940

它已经是一种反应形式。但登录并注销状态是正确的？ – user3411864

我对redux没有太多经验，但看起来这篇文章可能会以某种方式回答你的问题。 http://brianflove.com/2017/04/10/angular-reactive-authentication/ – trungk18

没有必要保持形式的国家在店里。使用反应形式来处理验证和更改。你不必把所有东西都放在商店里。

当需要一个行动，你将派遣这样的：

this.store.dispatch({ type: ACTION_TYPE, payload: this.form.value });

这一行动将引发效果，这将调用API登录。在成功或出错后，您需要派遣新的操作来处理它。如果您的通话成功，您将从此效果派发一个动作，例如LOGIN_SUCCESS，您将以另一种效果处理该效果，该效果将调用您将保存在商店中的“获取用户数据”API。至于jwt，您可以将其保存在localStorage中，以便应用程序记住登录状态。在你的代码可能有一个具有可观察到的财产status，如果用户登录其讲述了一个AuthenticationService。

如果发生错误的时候，你需要把它保存在您的商店的一些错误性，在显示它形成。

来源

2017-08-21 14:29:55 Matsura

因此调度与存储不一样吗？因为您将完整的表单有效载荷发送到商店？ – user3411864

@ user3411864调度仅启动一个操作。你必须在一个效果中处理这个动作，最终在一个reducer中。 reducer返回新的状态，而一个例子的效果调用API。行动本身什么都不做。有效载荷是任意的，你可以通过你需要的任何行为。 – Matsura

我的墙上有这张图片https://uploads.toptal.io/blog/image/121874/toptal-blog-image-1484754099125-659f9aa8dbf05fea9aa209dc1de0f5e2.png但是可能它不再准确。效果在哪里适合这个模式？你是指'@ ngrx/effects'？从Udemy课程中，我了解到我需要在component.ts文件的onSubmit（）函数中分派LOGIN_BUSY动作，对API进行异步调用，并在成功分派第二个调用LOGIN_SUCCEED时调用。这种方法有什么问题？ – user3411864

表单是必不可少的手段来收集用户数据，所有的验证就像您对数据执行的检查，以确保它可用于您的应用程序以供将来处理。

对于这样的场景，被动形式是最好的，你可以使用，它会给你所有的灵活性，你需要添加验证器和逻辑到表单，并在一个地方保持一切。

只有当您点击提交后完成所有验证和检查后，您才可以将整个表单数据作为有效载荷分派到状态对象中。

这样this.store.dispatch({ type: Form_Data , payload : this.form.value});

然后将左右移动应用程序。进一步处理。作为你的国家的一部分。

有关使用反应形式的更多信息，请检查此link。

更多关于NGRX Link

一整个应用程序建立在NGRX V4工作example其回购link

来源

2017-08-15 18:22:53

如何在Angular 4 + Redux设置中处理表单

回答

相关问题