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>

  • 相关阅读:
    VSPD虚拟串口工具
    Go 普通指针类型、unsafe.Pointer、uintptr之间的关系
    Go内存对齐
    自定义URL Protocol 协议
    C# 百钱买百鸡
    C++输出九九乘法表
    C#嵌入子窗体,判断子窗体是否打开了
    K3 WISE 开发插件《K3 WISE常用数据表整理》
    提取Jar2Exe源代码,JavaAgent监控法
    Linux密码重置
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9775753.html
Copyright © 2011-2022 走看看