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>

  • 相关阅读:
    10055
    国外程序员推荐:每个程序员都应该读的非编程书
    Volume 0. Getting Started
    如何成为一名 Google 软件工程师?【Google招聘信息】作者: 丁鑫哲
    毕设-家校通
    如何快速创建数据库连接字符串
    LeetCode day13
    LeetCode day12
    LeetCode day11
    LeetCode day10 Called it
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9775753.html
Copyright © 2011-2022 走看看