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>

  • 相关阅读:
    七个高效的文本编辑习惯(以Vim为例)
    rbx1 package 下载安装过程
    ros机器人开发概述
    ROS BY EXAMPLE 1 -- 环境设置与安装
    除法取模练习(51nod 1119 & 1013 )
    kinect driver install (ubuntu 14.04 & ros-indigo)
    ros问题总结
    200行代码搞定炸金花游戏(PHP版)
    JavaScript方法call,apply,caller,callee,bind的使用详解及区别
    javascript中apply、call和bind的区别
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9775753.html
Copyright © 2011-2022 走看看