关于前端: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