[RXJS實戰]使用RXJS管理Angular應用狀態

使用RXJS管理Angular應用狀態

---

==由於Node.js出現而衍生的前端框架逐漸走向成熟,各個框架以前互相借鑑良好的編程思想已經成爲常態,目前React與Vue分別都有Redux,Vuex工具來管理應用程序數據狀態,惟獨Angular沒有出現成熟穩定的狀態管理工具,雖然NGRX是專門爲Angular設計,可是其上手較難,因此本人不想使用,因此仍是使用比較熟練的RXJS來定製.==

數據中心(Store)

cancellation.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<ActionConstucter>;

    constructor() { }

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

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

}

---

動做(Action)

/**
 * 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的惟一方式就是觸發action來改變store中的數據，而且這個action是一個對象，可是每每view的觸發不少，而且有可能觸發的類型相同只是傳遞的內容不一樣，那麼咱們每次都來寫一個對象（而且寫這個對象時每次都要寫相同的類型），是很麻煩的。 因此咱們能夠定義一個函數來生成 action (實際上就是傳遞必要的參數返回一個符合action的對象)。

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

---

reducer(動做狀態處理器)==未應用==

JavaScript來理解。reduce屬於一種高階函數，它將其中的回調函數reducer遞歸應用到數組的全部元素上並返回一個獨立的值。這也就是「縮減」或「摺疊」的意義所在了。

總而言之一句話，redux當中的reducer之因此叫作reducer，是由於它和 Array.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();
            });
    }

• 調度Action

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