zoukankan      html  css  js  c++  java
  • [Angular] Expose Angular Component Logic Using State Reducers

    A component author has no way of knowing which state changes a consumer will want to override, but state reducers handle this problem by allowing the parent component to override any state change.

    In Short, we want to have a way to override the component's internal state from outside. The reason for that is there maybe some requirements from the users who want to override component internal state for whatever reason. 

    The state reducer can accomplish this task, so what is state reducer? It is just a fansic name form some smart developers. State reducer is a function which two two params, one is old state, another one is changes going to be happen, return value is the new state.

    export type ToggleStateReducer =
      (state: ToggleState, changes: Partial<ToggleState>)
        => ToggleState;

    So inside toggle.component.ts, we accept an @Input() stateReducer:

      @Input() stateReducer: ToggleStateReducer =
        (state, changes) => ({ ...state, ...changes });

    Whenenver we need to change toggle component internal state, we call stateReducer:

      setOnState(on: boolean) {
        const oldState = { on: this.on };
        const newState = this.stateReducer(oldState, { on });
        if (oldState !== newState) {
          this.on = newState.on;
          this.toggled.emit(this.on);
        }
      }

    That's all what we need to for component part. Just make stateReducer as a input, call each time we need to udpate our internal state, we call thought stateReducer to get new state.

    So now, from the consumer component, we can control the state update:

    // app.component.ts:
    
      stateReducer = (state: ToggleState, changes: Partial<ToggleState>) => {
        if (this.timesClicked > 3) {
          return state;
        }
        if (changes.on !== undefined) {
          this.timesClicked = this.timesClicked + 1;
        }
        return { ...state, ...changes };
      }
    <toggle (toggled)="log('toggle', $event)" [stateReducer]="stateReducer">
      <ng-template let-on="on" let-fns="fns">
        <switch [on]="on" toggler (click)="fns.toggle()">
        </switch>
      </ng-template>
    </toggle>

  • 相关阅读:
    Tableau如何绘制堆叠柱状图
    Tableau如何绘制多边形地图
    Tableau如何绘制凹凸图
    数据库备份策略设计
    MySQL数据库如何实现增量备份
    Tableau如何绘制瀑布图
    创建.net core ef项目
    asp.net core的ef的连接字符串
    sqlserver的varchar nvarchar区别
    jq的ajax请求写法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9775753.html
Copyright © 2011-2022 走看看