How to use counters in JS

This time I will bring you the use of counters in JS. What are the precautions when using counters in JS. The following is a practical case, let’s take a look.

The learning cost of angular2+ should be the highest among the three major frameworks. Tutorials and cases are scarce and the process is more complicated. Here I use two cases of counter and online acquisition of user data and rendering into a list to help you quickly Get angular2+.

Before you start, I hope you can master rxjs and typescript, otherwise you may find it difficult to understand some of the writing methods.

Before you start, you need to install @ngrx/store and @ngrx/effects

yarn add @ngrx/store @ngrx/effects

The ngrx/effects and ngrx/store versions used in this tutorial are both 5.2.0.

Let’s briefly talk about the development process:

Start -> Write data model-> Write action -> Write reducers and Configure to the corresponding module -> Write services -> Write effects and configure them to the corresponding module -> Create components -> Component binding data model -> Rendering

Let’s complete the counter case first. Since there are no asynchronous tasks in this case, services and effects can be omitted.

The steps from creating the project to starting the initial page will not be discussed here. Note that style should use scss. Also do not use cnpm to install the package. Use yarn or npm instead, so that errors are less likely to occur later.

ng new your-project --style scss

The first step: write the data model (app/models/num.ts)

export class Num {
  count: number;
 
  constructor(num: number) {    this.count = num;
  }
}

The second step: write the action (app /actions/num.ts)

import {Action} from '@ngrx/store';
 
export enum NumActionType {
  Add = 'ADD'}
 
export class ADD implements Action {
  readonly type = NumActionType.Add;  //固定写法，必须叫type}

Step 3: Write redurcers (app/redurces/modelNum.ts)

import {Num} from '../models/num';
import {Action} from '@ngrx/store';
import {NumActionType} from '../actions/num';
 
 
export const modelNum = (state: Num = new Num(0), action: Action) => {       
  switch (action.type) {    case NumActionType.Add:
      state.count++;      return state;    default:      return state;
  }
};

Don’t forget to configureredurcer（app/app.module.ts）

  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    StoreModule.forRoot({ modelNum}),      //配置redurcer
  ],

Part 4: Create components

ng g component model-num

Step 5: Component binding data Model (complete the sixth step together)

Componenthtml file:

<p>
  <input (click)="add()" value="+" type="button">
  <p>{{num.count}}</p>
  <input value="-" type="button">
  <br/>
  <a routerLink="/list">to list demo</a></p>

Componentts file:

import {Component, OnInit} from '@angular/core';
import {Num} from '../models/num';
import {Store} from '@ngrx/store';
import {NumActionType} from '../actions/num';

@Component({
  selector: 'app-model-demo',
  templateUrl: './model-demo.component.html',
  styleUrls: ['./model-demo.component.scss']
})
export class ModelDemoComponent implements OnInit {
  constructor(private _store: Store<any>) {
    this._store.select(&#39;modelNum&#39;).subscribe(mNum => {    //涉及到rxjs。    
      this.num = mNum;
      console.log(mNum);
    });
  }
  public num: Num;
  public add() {
    console.log(&#39;add&#39;);
    this._store.dispatch({          //调用dispatch触发添加redurces
      type: NumActionType.Add
    });
  }
  ngOnInit() {
  }
}

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to the php Chinese websiteOtherrelated articles!

Recommended reading:

JavaScript Optimizing DOM

Vue’s Computed Properties

The above is the detailed content of How to use counters in JS. For more information, please follow other related articles on the PHP Chinese website!