Angular中NgRx/Store框架怎么用

发布时间:2021-06-30 13:42:55 作者:小新
来源:亿速云 阅读:232

这篇文章将为大家详细讲解有关Angular中NgRx/Store框架怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

ngrx/store 是基于RxJS的状态管理库,其灵感来源于Redux。在NgRx中,状态是由一个包含actionreducer的函数的映射组成的。Reducer函数经由action的分发以及当前或初始的状态而被调用,最后由reducer返回一个不可变的状态。

Angular中NgRx/Store框架怎么用

状态管理

在前端大型复杂Angular/AngularJS项目的状态管理一直是个让人头疼的问题。在AngularJS(1.x版本)中,状态管理通常由服务,事件,$rootScope混合处理。在Angular中(2+版本),组件通信让状态管理变得清晰一些,但还是有点复杂,根据数据流向不同会用到很多方法。

ngrx/store中的基本原则

视图层通过dispatch发起一个行为(action)、Reducer接收action,根据action.type类型来判断执行、改变状态、返回一个新的状态给store、由store更新state

Angular中NgRx/Store框架怎么用

Actions(行为)

Actions是信息的载体,它发送数据到reducer,然后reducer更新storeActionsstore能接受数据的唯一方式。

ngrx/store里,Action的接口是这样的:

// actions包括行为类型和对应的数据载体
export interface Action {
  type: string;
  payload?: any;
}

type描述期待的状态变化类型。比如,添加待办 ADD_TODO,增加 DECREMENT 等。payload是发送到待更新store中的数据。store派发action 的代码类似如下:

// 派发action,从而更新store
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Buy milk'
});
Reducers(归约器)

Reducers规定了行为对应的具体状态变化。是纯函数,通过接收前一个状态和派发行为返回新对象作为下一个状态的方式来改变状态,新对象通常用Object.assign和扩展语法来实现。

// reducer定义了action被派发时state的具体改变方式
export const todoReducer = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

开发时特别要注意函数的纯性。因为纯函数:

Store(存储)

store中储存了应用中所有的不可变状态。ngrx/store中的storeRxJS状态的可观察对象,以及行为的观察者。

可以利用Store来派发行为。也可以用Store的select()方法获取可观察对象,然后订阅观察,在状态变化之后做出反应。

上面我们描述的是基本流程。在实际开发过程中,会涉及API请求、浏览器存储等异步操作,就需要effectsserviceseffectsaction触发,进行一些列逻辑后发出一个或者多个需要添加到队列的action,再由reducers处理。

Angular中NgRx/Store框架怎么用

使用ngrx/store框架开发应用,始终只维护一个状态,并减少对API的调用。

简单示例

简单介绍一个管理系统的登录模块。

创建Form表单

1、增加组件:LoginComponent,主要就是布局,代码为组件逻辑

2、定义用户:User Model

export class User {
    id: number;
    username: string;
    password: string;
    email: string;
    avatar: string;

    clear(): void {
        this.id = undefined;
        this.username = "";
        this.password = "";
        this.email = "";
        this.avatar = "./assets/default.jpg";
    }
}

3、添加表单:在组件LoginComponent增加Form表单

NGRX Store

按照上述的4个原则定义相应的Actions

Angular中NgRx/Store框架怎么用

Angular中NgRx/Store框架怎么用

关于“Angular中NgRx/Store框架怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. Angular http 拦截器
  2. Java 开源办公开发平台 O2OA V5.1.1 发布 | 支持 Vue、React、Angular

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

angular ngrx/store

上一篇:javascript变量指的是什么意思

下一篇:mysql触发器怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》