hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

Angular中运用ngrx/store举行状况治理_WEB前端开发

2020-09-15前端开发搜奇网4°c
A+ A-

简介

ngrx/store的灵感来源于Redux,是一款集成RxJS的Angular状况治理库,由Angular的布道者Rob Wormald开发。它和Redux的中心头脑雷同,但运用RxJS完成观察者情势。它遵照Redux中心准绳,但特地为Angular而设想。

Angular中的状况治理大部分能够被service接受,那末在一些中大型的项目中,如许做的弊病就会显露出来,其中之一就是状况流杂沓,不利于后期保护,厥后便自创了redux的状况治理情势并配上rxjs流式编程的特性形成了@ngrx/store这么一个作用于Angular的状况治理工具.

相干教程引荐:《angular教程》

  • StoreModule:
    StoreModule是@ngrx/store API中的一个模块,它被用来在运用模块中设置reducer。

  • Action:
    Action是状况的转变。它形貌了某个事宜的发作,然则没有指定运用的状况怎样转变。

  • Store:
    它供应了Store.select()和Store.dispatch()来与reducer协同事情。Store.select()用于挑选一个selector,
    Store.dispatch(
    {
    type:‘add’,
    payload:{name:‘111’}
    }
    )
    用于向reducer分发action的范例。

@NgRx/Store 状况治理的三个准绳

起首,@NgRx/Store 一样恪守 Redux 的三个基本准绳:

  • 单一数据源

这个准绳是全部单页运用的状况经由过程object tree(对象树)的情势存储在store 内里。
这个定义非常笼统实在就是把一切须要同享的数据经由过程javascript 对象的情势存储下来

state ={
    application:'angular app',
    shoppingList:['apple', 'pear']
}
  • state is read-only(状况只能是只读情势)

这个 ngrx/store 中心之一就是用户不能直接修正状况内容。 举个例子,假如我们须要保留了登录页面状况,状况信息须要纪录登录用户的名字。 当登录名字转变,我们不能直接修正状况保留的用户名字

state={'username':'kat'},
//用户从新登录别的账户为tom
state.username = 'tom'  //在ngrx store 这个行动是相对不允许的
  • changes are made with pure functions(只能经由过程挪用函数来转变状况)

因为不能直接需改状况,ngrx/store 同时引入了一个叫做reducer(聚合器)的观点。经由过程reducer 来修正状况。

function reducer(state = 'SHOW_ALL', action) {
    switch (action.type) {
      	case 'SET_VISIBILITY_FILTER':
        	return Object.assign({}, state  ,newObj);  
        default:
        	return state  
        }
	}

ngrx/store运用实例

1.装置@ngrx/store

yarn add @ngrx/store

2. 建立 state, action, reducer

state 状况:
app\store\state.ts

//下面是运用接口的状况, 更范例
export interface TaskList {
  id: number;
  text: string;
  complete: boolean;
}

export const TASKSAll: TaskList[] = [
  {id: 1, text: 'Java Article 1', complete: false},
  {id: 2, text: 'Java Article 2', complete: false}
]

export interface AppState {
  count: number;
  todos: TaskList;
  // 假如要治理多个状况,在这个接口中增添即可
}

//这个是不必接口的状况
// export interface AppState {
//     count: number;
//     todos: any;
//     // 假如要治理多个状况,在这个接口中增添即可
//   }

reducer
app\store\reducer.ts

// reducer.ts,平常须要将state,action,reducer举行文件拆分
import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

const initialState = 0;
// reducer定义了action被派发时state的细致转变方式
export function counterReducer(state: number = initialState, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    case DECREMENT:
      return state - 1;

    case RESET:
      return 0;

    default:
      return state;
  }
}

actions

假如须要把action 零丁提取出来, 参考 背面的
5 假如想把action星散出来怎样处置惩罚?

3. 注册store

根模块:
app/app.module.ts

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
// StoreModule: StoreModule是@ngrx/storeAPI中的一个模块,
// 它被用来在运用模块中设置reducer。

import {counterReducer} from './store/reducer';

@NgModule({
  imports: [
  	StoreModule.forRoot({ count: counterReducer }), // 注册store
  ],
})
export class AppModule {}

4. 运用store

在组件或效劳中注入store举行运用

以 app\module\article\article.component.ts 组件为例:

// 组件级别
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { INCREMENT, DECREMENT, RESET} from '../../store/reducer';

interface AppState {
  count: number;
}

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})
export class ArticleComponent  {
  count: Observable<number>;

  constructor(private store: Store<AppState>) { // 注入store
    this.count = store.pipe(select('count')); 
    // 从app.module.ts中猎取count状况流
  }

  increment() {
    this.store.dispatch({ type: INCREMENT });
  }

  decrement() {
    this.store.dispatch({ type: DECREMENT });
  }

  reset() {
    this.store.dispatch({ type: RESET });
  }
}

模板页面:
app\module\article\article.component.html

<div class="state-count">

    <button (click)="increment()">增添Increment</button>
    <div>Current Count: {{ count | async }}</div>
    <button (click)="decrement()">削减Decrement</button>

    <button (click)="reset()">Reset Counter</button>
</div>

这里运用了 管道符 async, 在子模块里直接运用快报错 , 假如在子模块要完成 数据的双向绑定也会报错,细致缘由参照 课件申明的 问题: The pipe ‘async’ could not be found?

怎样做到在模板页面中不运用管道 来衬着页面 ?

修正以下:

count: Observable<number>;

constructor(private store: Store<AppState>) { // 注入store
    var stream = store.pipe(select('count')); 
    // 从app.module.ts中猎取count状况流
    stream.subscribe((res)=>{
          this.count = res;
      })
  }

为了治理轻易, 平常会把 type , state, actions,reducers 分开来治理

5 假如想把action星散出来怎样处置惩罚?

  1. 新建 \app\store\actions.ts 文件
import { Injectable } from '@angular/core';
import { INCREMENT, DECREMENT, RESET } from './types';

@Injectable()
export class CounterAction{
    // Add=function(){}
    Add(){
        return { type: INCREMENT }
    }
}

// 就只如许导出是不行的
// export function Add1(){
//     return { type: INCREMENT }
// }
  1. 在根模块 app.module.ts 注册
import {CounterAction} from './store/actions';

... 

providers: [CounterAction],
  1. 在组件中运用 – article.component.ts
import {CounterAction} from '../../store/actions';

export class ArticleComponent implements OnInit {

  constructor(
    private action: CounterAction  //注入CounterAction
    ) { }

    increment() {
    // this.store.dispatch({ type: INCREMENT }); 
    //把 actions星散出去
    this.store.dispatch(this.action.Add()); 
    
  }
}

更多编程相干学问,可接见:编程入门!!

以上就是Angular中运用ngrx/store举行状况治理的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
Angular中运用ngrx/store举行状况治理_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300734.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

推荐阅读