web-dev-qa-db-ja.com

ngrxとエフェクトを使用してアクション成功コールバックをサブスクライブする方法

私は簡単なことをしようとしています-いくつかのエンティティが保存された後（httpリクエストを使用して）、リストルートに戻りたいと思います。問題は、成功アクションにサブスクライブする方法です（または、レデューサーまたは効果がありますか？）

ここに私のアクションコードがあります：

static SAVE_POST = '[POST] Save POST';
savePOST(Post): Action {
    return {
        type: PostActions.SAVE_POST,
        payload: Post
    };
}

static SAVE_POST_SUCCESS = '[POST] Save POST Success';
savePOSTSuccess(Post): Action {
    console.log('action: savePostSuccess')
    return {
        type: PostActions.SAVE_POST_SUCCESS,
        payload:Post
    };
}

私はエフェクトを使用しています：

   @Effect() savePost$ = this.update$
    .ofType(PostActions.SAVE_POST)
    .map(action => action.payload)
    .switchMap(post => this.svc.savePost(post))
    .map(post => this.postActions.savePOSTSuccess(post));

減速機：

const initialState: PostListState = [];

export default function (state = initialState, action: Action): PostListState {
    switch (action.type) {
        case PostActions.LOAD_POST_SUCCESS: {
            return action.payload;
        }
        case PostActions.SAVE_POST_SUCCESS: {
            console.log('SavePOST SUCCESS',action.payload)
            let index = _.findIndex(state, {_id: action.payload._id});
            if (index >= 0) {
                return [
                    ...state.slice(0, index),
                    action.payload,
                    ...state.slice(index + 1)
                ];
            }
            return state;
        }
        default: {
            return state;
        }
    }
}

私のコンポーネントでは、成功コールバックにサブスクライブしたい：

   handlePostUpdated($event) {
     this.post = this.code;
     let _post: Post = Object.assign({}, { _id: this.id, name: this.name, text: this.post });
     this.store.dispatch(this.postActions.savePOST(_post)); //not have "subscribe" method

  }

手伝ってくれてありがとう

angularngrx
18
happyZZR1400

コンポーネントのアクションもサブスクライブできます。

[...]
import { Actions } from '@ngrx/effects';
[...]

@Component(...)
class SomeComponent implements OnDestroy {
    destroyed$ = new Subject<boolean>();

    constructor(updates$: Actions) {
        updates$
            .ofType(PostActions.SAVE_POST_SUCCESS)
            .takeUntil(this.destroyed$)
            .do(() => /* hooray, success, show notification alert ect.. */)
            .subscribe();
    }

    ngOnDestroy() {
        this.destroyed$.next(true);
        this.destroyed$.complete();
    }
}
42
olsn

これに基づいて： https://netbasal.com/listening-for-actions-in-ngrx-store-a699206d2210 ngrx 4にはDispatcherはありませんが、代わりにActionsSubject：

import { ActionsSubject } from '@ngrx/store';

subsc = new Subcription();

constructor(private actionsSubj: ActionsSubject, ....) { 
  this.subsc = actionsSubject.subscribe(data => { 
     if(data.type === 'SAVE_POST_SUCCESS') {
       // do something...
     }
  });
}

ngOnDestroy() {
  this.subsc.unsubscribe();
}
26
AJT82

最新の投稿を提供するセレクターが必要です

this.latestPost$ = this.store.select(fromRoot.getPost);

その後、this.latestPost$ observableにサブスクライブし、コンポーネントでlatestPost$: Observable<Post>;を宣言したと仮定して、新しいルートにリダイレクトできます。

詳細については、このサンプルアプリをご覧ください https://github.com/ngrx/example-app

2
Kuncevič

SavePOSTSuccessアクションで、reducer関数コードも追加し、保存された投稿が状態にどのように影響するかを示すとよいでしょう。

一般に、投稿状態に「編集」ブールプロパティを配置できます。

レデューサーでは、プロパティをfalseに設定することにより、フラグ値を！editing状態に設定できます。

次に、そのプロパティにセレクタを追加し、このプロパティに従ってフォームを表示または非表示にすることができます。

1
Ran