摘要：因?yàn)槲覀冋靡褂茫藭r(shí)我們就可以用的服務(wù)來(lái)監(jiān)聽(tīng)了當(dāng)然，我們不能忘了清空訂閱最后一步就是在有返回的時(shí)候調(diào)用表單的現(xiàn)在我們可以在組件里顯示提醒了

原文：Connect Angular Forms to @ngrx/store

這篇文章中，我們將要討論如何用ngrx/effects連接Angular表單和ngrx/store

我們最終的結(jié)果是這樣的

ew-story0.component.ts

@Component({
  selector: "new-story-form",
  template: `
    

       ...controls
    
    
Success!
    
{{error}}
})
class NewStoryFormComponent {...}

方便起見(jiàn)，我們會(huì)寫一個(gè)簡(jiǎn)單的reducer來(lái)組織管理我們應(yīng)用里的所有的表單

狀態(tài)（the state）將由一個(gè)用ID作為key，表格數(shù)據(jù)作為value的簡(jiǎn)單對(duì)象構(gòu)成

舉個(gè)例子

connect-form.reducer.ts

const initialState = {
  newStory: {
    title: "",
    description: ""
  },
  contactUs: {
    email: "",
    message: ""
  }
}

export function forms(state = initialState, action) {
}

我們先構(gòu)建一個(gè)action——UPDATE_FORM。這個(gè)action由兩個(gè)key：path和value組成

connect-form1.reducer.ts

store.dispatch({
  type: UPDATE_FORM,
  payload: {
    path: "newStory",
    value: formValue
  }
});

然后這個(gè)reducer將負(fù)責(zé)更新state

connect-form2.reducer.ts

export function forms(state = initialState, action) {
  if(action.type === UPDATE_FORM) { 
                       // newStory:           formValue
    return { ...state, [action.payload.path]: action.payload.value }
  }
}

我們想要基于state更新表單，所以我們需要path作為輸入，然后取出store中正確的片段

connect-form.directive.ts

@Directive({
  selector: "[connectForm]"
})
export class ConnectFormDirective {
  @Input("connectForm") path: string;

  constructor(private formGroupDirective: FormGroupDirective,
    private store: Store ) {
      
    ngOnInit() {
      // Update the form value based on the state
      this.store.select(state => state.forms[this.path]).take(1).subscribe(formValue => {
        this.formGroupDirective.form.patchValue(formValue);
      });
    }
  }
}

我們抓取表單directive實(shí)例然后從store里更新表單數(shù)據(jù)

當(dāng)表單數(shù)據(jù)改變時(shí)我們也需要更新表單狀態(tài)。我們可以通過(guò)訂閱（subscribe）這個(gè)valueChanges的可觀察對(duì)象（observable）然后調(diào)度（dispatch）這個(gè)UPDATE_FORM的action來(lái)獲取值

connect-form1.directive.ts

this.formChange = this.formGroupDirective.form.valueChanges
  .subscribe(value => {
    this.store.dispatch({
      type: UPDATE_FORM,
      payload: {
        value,
        path: this.path, // newStory
      }
    });
})

這就是表單和State同步所要做的全部工作了

有兩件事我們要在這個(gè)部分完成

基于HTTP響應(yīng)返回來(lái)顯示通知給用戶——我們需要保證通知直接傳給組件并且不儲(chǔ)存信息在store里

有兩點(diǎn)原因

通常，沒(méi)有其他的組件需要這個(gè)信息

我們不想每次都重置store

當(dāng)提交成功時(shí)重置表單

我們將讓Angular盡其所能，處理好前端表單校驗(yàn)并重置表單

成功的Action包含表單的path屬性所以我們可以知道到底哪個(gè)表單需要重置，同時(shí)什么時(shí)候需要去使用（emit）這個(gè)成功的事件

connect-form2.directive.ts

const FORM_SUBMIT_SUCCESS = "FORM_SUBMIT_SUCCESS";
const FORM_SUBMIT_ERROR = "FORM_SUBMIT_ERROR";
const UPDATE_FORM = "UPDATE_FORM";

export const formSuccessAction = path => ({
  type: FORM_SUBMIT_SUCCESS,
  payload: {
    path
  }
});

同成功的action一樣，因?yàn)橛衟ath的存在，我們也知道何時(shí)去使用（emit）錯(cuò)誤異常 的事件

connect-form3.directive.ts

export const formErrorAction = ( path, error ) => ({
  type: FORM_SUBMIT_ERROR,
  payload: {
    path,
    error
  }
});

我們需要?jiǎng)?chuàng)建 成功 和 錯(cuò)誤異常 的輸出 然后 監(jiān)聽(tīng) FORM_SUBMIT_ERROR 和 FORM_SUBMIT_SUCCESS 的 action。

因?yàn)槲覀冋靡褂?ngrx/effects ，此時(shí)我們就可以用 Action 的服務(wù)（service）來(lái)監(jiān)聽(tīng)actions了

connect-form3.directive.ts

@Directive({
  selector: "[connectForm]"
})
export class ConnectFormDirective {
  @Input("connectForm") path : string;
  @Input() debounce : number = 300;
  @Output() error = new EventEmitter();
  @Output() success = new EventEmitter();
  formChange : Subscription;
  formSuccess : Subscription;
  formError : Subscription;

  constructor( private formGroupDirective : FormGroupDirective,
               private actions$ : Actions,
               private store : Store ) {
  }

  ngOnInit() {
    this.store.select(state => state.forms[this.path])
      .debounceTime(this.debounce)
      .take(1).subscribe(val => {
      this.formGroupDirective.form.patchValue(val);
    });

    this.formChange = this.formGroupDirective.form.valueChanges
      .debounceTime(this.debounce).subscribe(value => {
        this.store.dispatch({
          type: UPDATE_FORM,
          payload: {
            value,
            path: this.path,
          }
        });
      });

    this.formSuccess = this.actions$
      .ofType(FORM_SUBMIT_SUCCESS)
      .filter(( { payload } ) => payload.path === this.path)
      .subscribe(() => {
        this.formGroupDirective.form.reset();
        this.success.emit();
      });

    this.formError = this.actions$
      .ofType(FORM_SUBMIT_ERROR)
      .filter(( { payload } ) => payload.path === this.path)
      .subscribe(( { payload } ) => this.error.emit(payload.error))
  }
}

當(dāng)然，我們不能忘了清空訂閱

connect-form4.directive.ts

ngOnDestroy() {
  this.formChange.unsubscribe();
  this.formError.unsubscribe();
  this.formSuccess.unsubscribe();
}

最后一步就是在有返回的時(shí)候調(diào)用表單的actions

connect-form4.directive.ts

import {
  formErrorAction,
  formSuccessAction
} from "../connect-form.directive";

@Effect() addStory$ = this.actions$
  .ofType(ADD_STORY)
  .switchMap(action =>
    this.storyService.add(action.payload)
    .switchMap(story => (Observable.from([{
      type: "ADD_STORY_SUCCESS"
    }, formSuccessAction("newStory")])))
    .catch(err => (Observable.of(formErrorAction("newStory", err))))
  )

 

現(xiàn)在我們可以在組件里顯示提醒了

ew-story.component.ts

 @Component({
  selector: "new-story-form",
  template: `
    

       ...controls
      Submit
    
    
Success!
    
{{error}}
  `
})
class NewStoryFormComponent {

  constructor(private store: Store ) {}

  onError(error) {
    this.error = error;
  }

  onSuccess() {
    this.success = true;
  }

  submit() {
    // You can also take the payload from the form state in your effect 
    // with the withLatestFrom observable
    this.store.dispatch({
      type: ADD_STORY,
      payload: ...
    })
  }

}