Угловая 2 + ngrx (redux) + формы

Question

Как вы обрабатываете угловые формы 2 в однонаправленном потоке данных? Особенно с проверкой между несколькими родительскими/дочерними компонентами?

Я использую формы ngrx/store и model с форм-компоновщиком. Возможно ли сделать что-то подобное, например, редуктор формы в React и сделать его частью магазина?

У вас есть статьи об этом?

Answer 1

В приложениях, которые я построил с угловыми 2, следующее руководство, казалось, хорошо работают:

компоненты Родительские передачи данных вплоть до детей через связывание данных. Детальные компоненты запрашивают изменения данных, передавая выходные события родительским компонентам. Обязанность родительских компонентов должна действовать соответствующим образом.

В иерархической структуре компонентов изменения данных обрабатываются самым низким компонентом, который зависит от данных. Если есть другой компонент выше или родственный брат, который зависит от одного и того же элемента данных, пропустите изменения, испустив события и оставьте обработку более высоким компонентом.

Эта схема работает хорошо, потому что для любых данных, относящихся к нескольким компонентам, существует один компонент, ответственный за выполнение изменений. Изменения автоматически сбрасываются. Компоненты многоразового использования, а изменения в дереве компонентов можно легко адаптировать.

Что касается проверки, то любой компонент в лестнице между самым низким компонентом, излучающим запрос изменения данных, до самого высокого компонента, который, наконец, обрабатывает изменение, любой компонент может эффективно отменить изменение, не передавая его выше. В большинстве приложений я бы предпочел проверять изменения данных в начале изменения.

Естественно, что дочерние компоненты все еще могут иметь внутреннее состояние и не нуждаются в обмене изменениями - если изменения не имеют отношения к родительскому компоненту.

Answer 2

Данные формы по своей сути являются очень локальным состоянием, особенно для Angular, поскольку ngModel связывается с локальными переменными компонента. Главные разработчики, которые, как я знаю, рекомендуют хранить данные для формы, локализованной для этого компонента (т. Е. Просто использовать ngModel с локальными переменными). Это связано с тем, что данные незаданной формы почти никогда не используются различными компонентами всего вашего приложения. Когда пользователь отправляет форму, вы можете отправить действие с полезной нагрузкой, содержащей данные формы, в родительский компонент, в хранилище или даже с помощью ngrx/effect для публикации на сервере.

Answer 3

Это довольно старый вопрос, но я не мог найти отличного решения в своем собственном стремлении работать с реактивными формами ngrx + в Angular. В результате я опубликую здесь свои исследования с надеждой, что это может помочь кому-то другому. Мое решение можно разбить на две части, и я молюсь, чтобы вы (oh weathered soul) нашли, что это применимо к вашей проблеме:

1) Мониторинг элемента формы/s (например, событие «keyup» для типичного текста ввод) и обновить состояние от этого события. Эта стратегия исходит из book search component в ngrx example app. Теперь мы можем успешно заполнить государство по мере изменения нашей формы. Потрясающие! 50% сделано!

2) Угловой reactive forms guide демонстрирует создание группы форм в конструкторе. Я видел, как другие люди делают это внутри ngOnInit, но это слишком поздно для жизненного цикла для наших нужд (я пробовал, я провалился). Теперь, когда мы создали нашу группу форм, настройте ngOnChanges, чтобы зафиксировать любые изменения, перенесенные из состояния, а затем обновить группу форм, используя patchValue.Например:

ngOnChanges(changes: SimpleChanges) { 
    if (changes.valueICareAbout1) { 
     this.myForm.patchValue({ 
     valueICareAbout1: changes.valueICareAbout1.currentValue 
     }); 
    } 
    if (changes.valueICareAbout2) { 
     this.myForm.patchValue({ 
     valueICareAbout2: changes.valueICareAbout2.currentValue 
     }); 
    } 
    } 

Answer 4

Я создал библиотеку под названием ngrx-forms, что делает именно то, что вы хотите. Вы можете получить его на НОМ через:

npm install ngrx-forms --save 

Я рекомендую проверить полную README на странице GitHub, но ниже вы можете найти некоторые примеры того, что вам нужно сделать, чтобы получить библиотеку и работают после установки.

Импорт модуля:

import { StoreModule } from '@ngrx/store'; 
import { NgrxFormsModule } from 'ngrx-forms'; 

import { reducers } from './reducer'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    NgrxFormsModule, 
    StoreModule.forRoot(reducers), 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Добавить в состояние группы где-то в дереве состояний с помощью createFormGroupState и вызвать formGroupReducer внутри вашего редуктора:

import { Action } from '@ngrx/store'; 
import { FormGroupState, createFormGroupState, formGroupReducer } from 'ngrx-forms'; 

export interface MyFormValue { 
    someTextInput: string; 
    someCheckbox: boolean; 
    nested: { 
    someNumber: number; 
    }; 
} 

const FORM_ID = 'some globally unique string'; 

const initialFormState = createFormGroupState<MyFormValue>(FORM_ID, { 
    someTextInput: '', 
    someCheckbox: false, 
    nested: { 
    someNumber: 0, 
    }, 
}); 

export interface AppState { 
    someOtherField: string; 
    myForm: FormGroupState<MyFormValue>; 
} 

const initialState: AppState = { 
    someOtherField: '', 
    myForm: initialFormState, 
}; 

export function appReducer(state = initialState, action: Action): AppState { 
    const myForm = formGroupReducer(state.myForm, action); 
    if (myForm !== state.myForm) { 
    state = { ...state, myForm }; 
    } 

    switch (action.type) { 
    case 'some action type': 
     // modify state 
     return state; 

    default: { 
     return state; 
    } 
    } 
} 

Expose состояние формы внутри компонента:

import { Component } from '@angular/core'; 
import { Store } from '@ngrx/store'; 
import { FormGroupState } from 'ngrx-forms'; 
import { Observable } from 'rxjs/Observable'; 

import { MyFormValue } from './reducer'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: './my-component.html', 
}) 
export class MyComponent { 
    formState$: Observable<FormGroupState<MyFormValue>>; 

    constructor(private store: Store<AppState>) { 
    this.formState$ = store.select(s => s.myForm); 
    } 
} 

Установить contr ol в вашем шаблоне:

<form novalidate [ngrxFormState]="(formState$ | async)"> 
    <input type="text" 
     [ngrxFormControlState]="(formState$ | async).controls.someTextInput"> 

    <input type="checkbox" 
     [ngrxFormControlState]="(formState$ | async).controls.someCheckbox"> 

    <input type="number" 
     [ngrxFormControlState]="(formState$ | async).controls.nested.controls.someNumber"> 
</form>