angularjs – 带Redux的Angular表单

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

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

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

在这种情况下,解决方案是像以前一样继续：通过调度更新操作从Angular表单更新redux状态,并通过#mapStateToThis从redux状态更新Angular表单.

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

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

另一个常见的用例是实现“表单重置”,即,例如,在按下按钮之后将表单重置为“原始”状态.同样,一个具体的例子将有助于：

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监听器的形式：

// 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));
  };
},

重置操作按预期工作(我不会概述).

总而言之,我应该补充一点,上面假设只有Angular表单可以弄脏应用程序设置—否则,可能永远不会存储初始表单值.如果是这种情况,那么一个惯用的解决方案就是创建一个自定义中间件,在app.pristine变为true时设置初始表单值. (或者,使用Angular手表.)