[RXJS実戦]RXJSを用いてAnglarアプリケーション状態を管理する.

RXJSを使ってAnglarアプリケーション状態を管理します.
==Node.jsが出現したために派生したフロントエンドフレームは徐々に成熟し、各フレームの前にお互いの良いプログラミング思想を参考にするのが常態となり、現在ReactとVueはそれぞれReduxがあり、Vuexツールはアプリケーションデータ状態を管理しています.Anglarだけが成熟して安定した状態管理ツールが現れていません.NGRXはAnglarのために設計されていますが、使いづらいです.ですから、本人は使いたくないので、もっと熟練したRXJSを使ってカスタマイズします.
データセンター(Store)
cancelation.data.service.ts

@Injectable()
export class CancellationDataService {
    cancellData: CancellationInfo;

    constructor() { }

    /**
     * When access the page each time, then need initial Center Data.
     */
    initPoAdjusterData(): CancellationInfo {
        this.cancellData = new CancellationInfo();
        return this.cancellData;
    }
}

状態管理(State)
stateは現在の状態ですが、storeとstateはどういう関係ですか?私たちはstoreオブジェクトにはすべてのデータが含まれていると考えられますが、ある時点のデータを得るためには、Storeに対してスナップショットを生成します.この時点のデータセットをStateといいます.

@Injectable()
export class CancellationStateService {

    mainSubject: Subject;

    constructor() { }

    initMainSubject() {
        this.mainSubject = new Subject();
    }

    /**
     * Dispatch one action
     */
    dispatchAction(actionType: Action) {
        const callAction = new ActionConstucter(actionType);
        this.mainSubject.next(callAction);
    }

    /**
     * Dispatch multiple actions at the same time.
     */
    dispatchActions(lstSubjectInfo: ActionConstucter[]) {
        _.each(lstSubjectInfo, (subjectInfo: ActionConstucter) => {
            this.mainSubject.next(subjectInfo);
        });
    }

    /**
     * When portal destory, then unsubscribe
     */
    unsubscribeMainSubject() {
        this.mainSubject.unsubscribe();
    }

}

アクション

/**
 * operation action subject (for containing each action type)
 */
export type Action =
    'QueryResult'
    | 'ReprocessException'
    | 'ReFreshCancellation'
    | 'ReFreshReschedule'
    /**
     * refresh cancellation reschedule two tab at the same time
     */
    | 'ReFreshCancellReschedule'
    /**
     * refresh queryResult's tab number (cancellation,reschedule,new po,exception)
     */
    | 'RefreshTabTotalNumber'
    /**
     * refresh New order todo table and submit table data
     */
    | 'ReFreshNewOrder'
    /**
     * refresh manual creation return list data
     * and create template data Source(like material...)
     */
    | 'RefreshManualCreation'
    /**
     * get Material list for create po template material option
     */
    |'RefreshPurchasingList' // New PO Submit List Submit Refresh PurchasingList;

action creater
viewによってstateを変える唯一の方法は、storeのデータを変えることであり、このactionは対象となりますが、viewのトリガが多く、同じように伝えられた内容だけでは触発される可能性があります.毎回、一つのオブジェクトを書きます.したがって、actionを生成する関数を定義することができます.

export class ActionConstucter {
    actionType: Action;
    constructor(actionType: Action) {
        this.actionType = actionType;
    }
}

reducer(動作状態プロセッサ)==未適用==
JavaScriptで理解します.reduceは配列のすべての要素に再帰的に適用され、独立した値を返す高次関数に属する.これはつまり「縮減」や「折りたたみ」の意味です.
つまり、reduxの中のreducerをreducerと呼ぶのは、Aray.prototype.reduceに入ってきたコールバック関数と非常に似ているからです.
実戦で使う

購読State

subscribeAction() {
        const { mainSubject } = this.stateSvc;
        mainSubject.takeUntil(this.compInstance.destroy$)
            .filter(item => item.actionType === 'QueryResult' ||
                item.actionType === 'ReFreshCancellation' || item.actionType === 'ReFreshCancellReschedule')
            .subscribe((item) => {
                this.refreshUI();
            });
    }

スケジューリングアクション

 this.stateSvc.dispatchAction('ReFreshCancellReschedule');

データを更新する

refreshUI() {
        this.compInstance.UICtrl = new UICtrlInfo();
        this.compInstance.UIDisplay = new UIDisplayInfo();
        this.compInstance.UIJsPanel = new CancellationTableJspanelInfo();

        this.closeAllExpand();
        const { cancellData } = this.dataService;
        this.compInstance.UICtrl.categoryTypeList = cancellData.categoryTypeList;
        this.compInstance.UICtrl.categoryCodeMap = cancellData.categoryCodeMap;
        const cancellationList = this.compInstance.submit ?
            cancellData.cancellationList.cancel_submit :
            cancellData.cancellationList.cancel_to_do as CancellationTableInputConfig[];
        if (!_.isEmpty(cancellationList)) {
            this.compInstance.UIDisplay.lstData = this.getContentList(cancellationList);
            this.cfgSvc.refreshStatus();
        }
    }

const { cancellData } = this.dataService;
        this.compInstance.UICtrl.categoryTypeList = cancellData.categoryTypeList;
        this.compInstance.UICtrl.categoryCode