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:

e388a4556c0f65e1904146cc1a846bee
  76f625d29d91ff4c359a75491cf07c39
  e388a4556c0f65e1904146cc1a846bee{{num.count}}94b3e26ee717c64999d7867364b1b4a3
  1a1811f9091ca6cacbc217ee2d376c6d
  076402276aae5dbec7f672f8f4e5cc81
  0403914373b426d6655839ccdad6ceb9to list demo5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

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!