angular状态管理方案(ngrx)

完全基于redux的ngrx方案,我们看看在angular中如何实现。通过一个简单的计数器例子梳理下整个流程

一 安装 :npm i  ngrx/store

这里特别要注意一点:安装 @ngrx/store的时候会出现和angular版本不一致的问题

所以检查一下@angular/core的版本和ngrx/store的版本是否一致,如果不一致升级angular,

 ng update @angular/core@17.0.0 --force。最好是删除node_modules目录重新下载。保证安装正常,版本一致

二 创建store目录,并且创建如下几个文件:

(1)actions.ts

   (2) reducers.ts

   (3)  state.ts

//state.tsexport interface AppState{count:number;
}   //actions.ts
export const INSCRES="INSCRES"
export const DESCRES="DESCRES"
export const RESET="RESET"//reduces:import {Action} from "@ngrx/store"
import {INSCRES,DESCRES,RESET} from "./actions"const initalState=0;
export function counterReducer(state:number=initalState,action:Action){switch(action.type){case INSCRES:return state+1;case DESCRES:return state-1case RESET:return 0default:return state}}

(4) 页面中注入:注意angular中使用store和react稍有不同。没有createStore(reducer)然后根组件注入的过程,而是在具体页面里直接注入到constructor中,我们以news页面为例,


import { Component, ElementRef, ViewChild } from '@angular/core';
import {INSCRES,DESCRES,RESET} from "../../store/reducer"
import {Store,select} from "@ngrx/store"
import { Observable } from 'rxjs';interface AppState{count:number
}@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.less']
})export class NewsComponent {count:Observable<number>constructor(public http:HttpClient,private store:Store<AppState>){let stream=store.pipe(select('count'))stream.subscribe(res=>{console.log("res:",res)})this.count=store.pipe(select('count'))}increasement(){this.store.dispatch({type:INSCRES})}decreasement(){this.store.dispatch({type:DESCRES})}reset(){this.store.dispatch({type:RESET})}}

然后在具体的页面中使用count:

 <button (click)="increasement()">增加increase</button><div>counter :{{count | async }}</div><button (click)="decreasement()">减少increase</button><button (click)="reset()">reset counter</button>

整体来看和react中使用redux并没有太大的差异。唯一的差异就是在react中需要定义store(let store=createStore(state,)),angular中直接通过在页面中注入的方式完成。

二:actions也可以是函数,我们可以改造下actions

//actions :注意这里需要用Injectable
import {Injectable} from "@angular/core"export const INSCRES="INSCRES"
export const DESCRES="DESCRES"
export const RESET="RESET"@Injectable()
export  class CountAction{add(){return {type:INSCRES}}}

此时我们需要向app.moudule.ts中作相应修改:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import {CountAction} from "./store/actions"import { AppComponent } from './app.component';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';import { HomeComponent } from './pages/home/home.component';
import { AppRouteModule } from './app-route.module';import { StoreModule } from '@ngrx/store';registerLocaleData(zh);@NgModule({declarations: [AppComponent,LayoutComponent,HomeComponent,],providers: [{provide:CountAction},{ provide: [NZ_I18N, UrlSerializer], useValue: zh_CN },{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorInterceptor, multi: true },],bootstrap: [AppComponent],imports: [BrowserModule,FormsModule,AppRouteModule,StoreModule.forRoot({count:counterReducer}, {}),]
})
export class AppModule { }

注意这里我们给providers添加了counterAction,以便在所有页面都可以注入countActions

回到页面本身:

import { Component, OnInit } from '@angular/core';
import { Observable, Observer } from 'rxjs';
import{CountAction} from "../../store/actions"
import {Store,select} from "@ngrx/store"interface AppState{count:number
}@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.less']
})
export class HomeComponent {count:Observable<number>constructor(private store:Store<AppState>,private action:CountAction){this.count=this.store.pipe(select('count'))increasement(){this.store.dispatch(this.action.add())}}

这里逻辑的实现和之前一致,唯一的区别就是我们countAction直接注到了counstor里,然后在具体的执行函数中直接actiions的方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/206912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 HPA 和 TopologySpreadConstraints 实现可用区间等比扩容

1. 原理介绍 设置 HPA 每次最小扩容 Pod 数为可用区数量&#xff0c;以期可用区间 Pod 同步扩容设置 TopologySpreadConstraints 可用区分散 maxSkew 为 1&#xff0c;以尽可能可用区间 Pod 均匀分布 2. 实验验证 2.1. 准备 Kind 集群 准备如下配置文件&#xff0c;命名为 …

软件测试面试题及答案解析

在软件测试领域&#xff0c;面试是求职者进入这个行业的重要途径。为了帮助大家更好地应对软件测试面试&#xff0c;本文将为大家提供一些常见的软件测试面试题及答案解析。 请简要介绍一下软件测试的目的和重要性。 答&#xff1a;软件测试的目的是确保软件产品的质量&#…

千问模型测试环境配置

配置千问环境比较顺利&#xff0c;有些由于速度问题较慢&#xff0c;添加源之后提速很多&#xff0c;记录如下&#xff1a; 1.创建虚拟环境 conda create -p /datanas3/chenjing/envs/qwen python3.8 2.激活虚拟环境 conda activate /datanas3/chenjing/envs/qwen 3.添加源 co…

“身份证信息批量核验:高效解决管理难题,轻松提升工作效率“

尊敬的读者们&#xff0c;您是否曾经因为身份证信息的核验而感到烦恼&#xff1f;是否曾经因为手动核验而感到繁琐和耗时&#xff1f;现在&#xff0c;我们向您介绍一款全新的工具——身份证信息批量核验器&#xff0c;它将帮助您一键解决管理难题&#xff0c;让工作事半功倍&a…

尝试通过AI模型进行简单的编码

一、前言 最近尝试通过AI来编程&#xff0c;总体感觉还是能处理写简单的问题&#xff0c;复杂的问题目前还是无法解决。主要的痛点还是数据噪音&#xff0c;就是AI永远不会承认它不会&#xff0c;它会给你的一个错误的信息&#xff0c;它也不会告诉你你的问题它暂时无法完整正…

Python基础语法详解,零基础入门必须掌握的知识点

文章目录 一、Python输出1、repr() 或 str() 转成字符串2、字符串填充空格进行格式化3、!a (使用 **ascii()**), !s (使用 **str()**) 和 !r (使用 **repr()**) 可以用于在格式化某个值之前对其进行转化 二、Python标识符三、Python保留字符&#xff08;关键字&#xff09;四、…

代码随想录算法训练营第四十五天| 70 爬楼梯 322 零钱兑换 279 完全平方数

目录 70 爬楼梯 322 零钱兑换 279 完全平方数 70 爬楼梯 本题可以转化为完全背包问题进行解答。 class Solution { public:int climbStairs(int n) {vector<int>f(n 2);f[0] 1;int m 2;for(int i 1;i < n;i){for(int j 1;j < m;j){if(i > j)f[i] f[i - j]…

[Python系列] 文字转语音

什么是TTS TTS 是 Text-to-Speech 的缩写&#xff0c;中文称为“文本到语音”。它是一种将书面文本转换为自然听起来的语音的技术。TTS 技术广泛应用于各种场景&#xff0c;如智能助手、语音合成、电子阅读器等。 TTS 技术通过机械的、电子的方法产生人造语音。它隶属于…

对Spring源码的学习:一

目录 BeanFactory开发流程 ApplicationContext BeanFactory与ApplicationContext对比 基于XML方式的Bean的配置 自动装配 BeanFactory开发流程 这里的第三方指的是Spring提供的BeanFactory&#xff0c;Spring启动时会初始化BeanFactory&#xff0c;然后读取配置清单&#…

外汇天眼:什么时段做外汇交易最好,有所谓的“最佳时间点”吗?

在外汇交易的时候&#xff0c;很多手动交易的投资者不知道到底什么时间段操作交易最适合自己。 我们在进行选择最佳交易时间的时候&#xff0c;一定要明白各时间段的全球各个市场的交易状况&#xff0c;这样你才能分配好自己的时间。 当然在通过技术分析与基本分析选择好币种后…

PostgreSQL 索引介绍和使用事项

索引内容 关键点 索引是一种数据结构&#xff0c;用于加快数据库查询的速度。它类似于书籍的目录&#xff0c;可以快速定位到特定的数据页。 PG数据库支持多种类型的索引&#xff0c;包括B树索引、哈希索引、GiST索引、SP-GiST索引和GIN索引等。 B树索引是PG数据库中最常用的…

Google刚发布AlphaCode 2,让我们码农多了个小伙伴一起干活

除了其Gemini生成式人工智能模型之外&#xff0c;谷歌今天早上发布了AlphaCode 2&#xff0c;这是谷歌DeepMind实验室大约一年前推出的代码生成AlphaCode的改进版本。 事实上&#xff0c;AlphaCode 2实际上由Gemini提供支持&#xff0c;或者至少是由Gemini的某个变体&#xff…

Linux学习教程(第十五章 Linux系统日志管理)

第十五章 Linux系统日志管理 系统日志详细地记录了在什么时间&#xff0c;哪台服务器、哪个程序或服务出现了什么情况。不管是哪种操作系统&#xff0c;都详细地记录了重要程序和服务的日志&#xff0c;只是我们很少养成查看日志的习惯。 日志是系统信息最详细、最准确的记录者…

煤炭物流行业分析:中国各个分布地区生产占比调研

煤炭物流是指从煤炭生产所需物料进入企业开始&#xff0c;直至把商品煤运达客户为止的全过程的物流活动。广义的讲&#xff0c;煤炭物流包括煤炭企业原材料的采购、原煤开采、洗选加工、储存、运输、销售以及矿岩等废弃物的综合利用诸多环节。狭义的讲&#xff0c;煤炭物流是指…

基于个微机器人的开发

简要描述&#xff1a; 下载消息中的动图 请求URL&#xff1a; http://域名/getMsgEmoji 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明…

spring boot 事件机制

目录 概述实践监听spring boot ready事件代码 源码初始化流程调用流程 结束 概述 spring boot 版本为 2.7.17 。 整体看一下spring及spring boot 相关事件。 根据下文所给的源码关键处&#xff0c;打上断点&#xff0c;可以进行快速调试。降低源码阅读难度。 实践 spring…

TCP聊天

一、项目创建 二、代码 Client类 package tcp;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.Socket; import java.util.Scanner;public class Client {public static void m…

电子学会C/C++编程等级考试2022年06月(四级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:公共子序列 我们称序列Z = < z1, z2, ..., zk >是序列X = < x1, x2, ..., xm >的子序列当且仅当存在 严格上升 的序列< i1, i2, ..., ik >,使得对j = 1, 2, ... ,k, 有xij = zj。比如Z = < a, b, f, c &…

QT Windos平台下打包应用程序

一、windeployqt.exe windeployqt&#xff1a;是 Qt 框架自带的一个工具&#xff0c;用于将一个 Qt 应用程序在 Windows 操作系统下进行打包。它可以通过扫描应用程序的依赖项获取所需的 Qt 库文件、插件和翻译文件&#xff0c;以及复制应用程序可执行文件和所需的依赖项到指定…

电商价格数据监测接口/品牌商品控价接口/商品数据分析接口/比价搜索API接口,超详细的接口说明

电商价格数据监测API接口是一种用于监测电商平台上商品价格的API接口&#xff0c;可以帮助品牌和商家及时获取商品价格信息&#xff0c;掌握价格动态&#xff0c;进行价格对比和分析&#xff0c;以更好地制定价格策略和进行价格调整。 该接口可以监测多个电商平台的商品价格信…