Redux的角形式 [英] Angular Forms with Redux

问题描述

在使用Redux和Angular时需要一些建议.在过去的几天中，我一直在研究Redux，并且确实认为这是存储应用程序数据的一种好方法.我遇到的问题是要保留商店中的所有内容还是仅保留某些部分.理想情况下，我认为整个应用程序都应在商店中运行，但是对于表格而言，这似乎非常繁琐.

Looking for some advice when working with Redux, and Angular. I've been researching Redux for the past couple of days and really think its a great way to store application data. The part I'm having trouble with is whether to persist everything within the store or only certain parts. Ideally, I think the entire application should be running through the store, but for forms this seems very tedious.

例如，假设我正在使用一个表单来添加新产品.这是我的一些痛点.

For example, lets say I'm working with a form to add a new product. Here are some of my pain points.

• 我想让User Reducer(商店)与实际表单状态分开.我应该为每个组件创建一个单独的缩小表单吗?

• I would like to keep the User Reducer (store) separated from the actual form state. Should I create a separate form reducer per component?

必须将每个输入字段都保留回商店，这听起来很麻烦.我已经看到库 redux-form 对此进行了简化，但该库用于React. p>

Having to persist every input field back to the store sounds like a lot of work. I've seen the library redux-form simplifies this, but is intended for React.

使用Redux在Angular中创建表单时，有人对它有什么好的建议吗?

Anyone have any good advice when it comes to creating forms in Angular with Redux?

推荐答案

答案是取决于".另外，假设是您相信单向数据流和redux的好处，因此，如果有选择的话，相对于双向数据绑定，更喜欢redux.

The answer is "it depends". Also, the assumption is that you''re convinced of the benefits of one-way data flow and redux, so prefer redux over two-way data binding if given the choice.

1. 超简单形式(无验证，与其他状态无复杂关系).然后，您可以赤裸裸"，直接将输入连接到redux.在我们的用例中，我们实际上决定使用Angular表单，因为我们认为它可以处理边缘情况(IE和safari mobile).
2. 不需要在redux状态下进行任何形式的更改.然后，表单提交可以调度一个操作来更新redux状态.如果表单需要更改以响应redux状态，事情就会变得棘手.参见下文.
3. 您确实需要在redux状态下进行每个表单更改. Angular表单没有form#ng-change，因此一种策略是将ng-change附加到分派操作以更新redux状态的每个输入. (是的，它很容易出错，因为它很容易忘记使用ng-change，同时应用程序似乎可以正常工作.)同样，如果表单需要更改以响应redux状态，那么事情就会变得棘手.参见下文.

1. Uber-simple form (no validation, no complex relationships with other state). Then you could "go naked" and directly hook up the inputs to redux. In our use case, we actually decided to go with Angular forms because we figured it handles edge cases (IE and safari mobile).
2. Don't need every form change in redux state. Then the form submit can dispatch an action to update redux state. Things get tricky if the form needs to change in response to redux state. See below.
3. You do need every form change in redux state. Angular forms do not have a form#ng-change, so one strategy is to attach an ng-change to every input that dispatches an action to update the redux state. (Yes, it is error prone because it easy to forget to use ng-change, meanwhile the app appears to work.) Again, things get tricky if the form needs to change in response to redux state. See below.

更新表单以响应redux状态更改

常见的用例实际上非常简单.一个具体的示例将有帮助-假设表单跟踪应用程序设置，同时app settings作为redux状态存在.也就是说，在Angular形式和redux状态之间存在双向数据绑定. 这可能是常见的用例.

Updating the form in response to redux state change

The common use case is actually very simple. A concrete example will help---suppose the form tracks app settings, meanwhile app settings exist as redux state. That is, there is a two-way data binding between the Angular form and the redux state. This is probably the common use case.

在这种情况下，解决方案将像以前一样进行:通过调度更新操作从Angular表单更新redux状态，并通过#mapStateToThis从redux状态更新Angular表单.

In this case, the solution is to proceed as before: update redux state from the Angular form by dispatching update actions, and update the Angular form from redux state via #mapStateToThis.

  Angular ----dispatch actions----->  Redux
   Form  <----mapStateToThis--------  State

唯一的难题是不将Redux状态直接传递给Angular形式，即深度克隆数据或使用ImmutableJS.

The only gotcha is to not pass the Redux state directly to the Angular form i.e., deep clone the data or use ImmutableJS.

另一个常见用例是实现表单重置"，即例如在按下按钮后将表单重置为原始"状态.同样，一个具体的示例将有所帮助:

The other common use case is to implement a "form reset", that is, reset the form to a "pristine" state after pressing a button, for example. Again, a concrete example will help:

假设app state(redux状态)通过标志app.pristine跟踪状态是否为原始状态. (为弄清app.pristine的工作方式，它按预期工作，即，只要任何值更改，它就会更改为false，并且仅在明确设置为true时才更改为true.)

Suppose that app state (redux state) tracks whether the state is pristine via a flag app.pristine. (To clarify how app.pristine works, it works as expected, that is, it changes to false as soon as any value changes, and changes to true only when explicitly set to true.)

首先，据我所知，Angular不会自动跟踪初始"状态.您必须自己进行操作，也可以将该状态放入redux中.然后，初始表单值只是app.pristine为false时的应用程序设置. (如果您打算将其放在#mapStateToThis中，请不要这样做.在转换函数中产生副作用似乎很奇怪.)更好的方法是使用异步操作，即onChange侦听器形式:

First, as far as I know, Angular doesn't automagically keep track of the "initial" state. You have to do it yourself and you may as well put that state in redux. Then, the initial form values are just the app settings when app.pristine is false. (If you're thinking of putting this in #mapStateToThis, don't. Doing side effects in a transform function seems weird.) A better way is to use an asynchronous action, namely the form onChange listener:

// thunk example
onFormChange(newForm) {

  return (dispatch, getState) => {

    const appSettings = getState().appSettings;
    const appIsPristine = appSettings.pristine;

    // this will fire once because the next action will set it to false
    appIsPristine && dispatch(initForm(appSettings)));
    dispatch(updateAppSettings(newForm));
  };
},

重设动作按您期望的方式工作(我不会概述).

The reset action works as you would expect (which I won't outline).

最后，我要补充一点，以上内容假设只有Angular表单会弄脏应用程序设置-否则，可能永远不会存储初始表单值.如果是这样，那么一种惯用的解决方案是创建一个自定义中间件，该中间件在app.pristine更改为true时都会设置初始表单值. (或者，使用Angular手表.)

To conclude, I should add that the above assumes that only the Angular form can dirty the app settings---otherwise, the initial form values may never be stored. If that's the case, then one idiomatic solution is to create a custom middleware that sets the initial form value whenever app.pristine changes to true. (Alternatively, use an Angular watch.)

这篇关于Redux的角形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！