首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ngrx angular 2我应该如何设置初始状态?

在Angular 2中使用Ngrx来管理状态时,你可以通过以下步骤来设置初始状态:

  1. 首先,你需要在你的应用中安装和配置Ngrx。你可以使用npm来安装Ngrx相关的包。在你的项目根目录下运行以下命令:
代码语言:txt
复制
npm install @ngrx/store --save
  1. 在你的应用中创建一个名为app.state.ts的文件,用于定义应用的初始状态。在这个文件中,你可以定义一个接口来描述你的应用状态的结构。例如:
代码语言:txt
复制
export interface AppState {
  counter: number;
  user: User;
  // 其他状态属性...
}
  1. 在你的应用的根模块中导入StoreModule并使用forRoot方法来配置Ngrx。在imports数组中添加以下代码:
代码语言:txt
复制
import { StoreModule } from '@ngrx/store';
import { appReducer } from './app.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ app: appReducer })
  ],
  // 其他模块配置...
})
export class AppModule { }

在上述代码中,appReducer是一个纯函数,用于处理状态的变化。你可以在app.reducer.ts文件中定义这个函数。

  1. app.reducer.ts文件中,你可以使用createReducer函数来创建一个reducer,用于处理状态的变化。在这个reducer中,你可以定义初始状态。例如:
代码语言:txt
复制
import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';
import { AppState } from './app.state';

export const initialState: AppState = {
  counter: 0,
  user: null
  // 其他初始状态属性...
};

export const appReducer = createReducer(
  initialState,
  on(increment, state => ({ ...state, counter: state.counter + 1 })),
  on(decrement, state => ({ ...state, counter: state.counter - 1 }))
  // 其他状态变化处理...
);

在上述代码中,initialState定义了应用的初始状态。

  1. 最后,在你的组件中,你可以使用select函数来选择你感兴趣的状态。例如,在一个名为CounterComponent的组件中,你可以使用以下代码来选择counter状态:
代码语言:txt
复制
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from './app.state';

@Component({
  selector: 'app-counter',
  template: `
    <div>Counter: {{ counter$ | async }}</div>
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
  `
})
export class CounterComponent {
  counter$: Observable<number>;

  constructor(private store: Store<AppState>) {
    this.counter$ = this.store.pipe(select(state => state.app.counter));
  }

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

在上述代码中,counter$是一个Observable,用于订阅counter状态的变化。

这样,你就可以通过以上步骤来设置Ngrx在Angular 2中的初始状态。请注意,这只是一个简单的示例,你可以根据你的应用需求进行相应的调整和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

应该使用Angular吗? 这取决于有些开发人员会告诉你最好使用React并在没有额外代码的情况下构建自己的组件。但这也可能是一个问题。...Angular是一个完全集成的框架,可以让您快速开始项目工作,无需考虑选择哪个库以及如何处理日常问题。认为Angular是作为前端的,就像RoR是作为后端的。...以下是Angular如何知道如何找到与我们的标签相对应的组件。显然,templateUrl并且styleUrls定义Angular应该从哪里获取我们的标记和CSS。...反应角 - Ngrx 让我们来谈谈我们的应用程序状态的意思是我们的应用程序的所有属性,它们的字面定义其当前的行为和状态。...什么是NgRXNgRX是一种管理应用程序状态的模式。这是一个支持Angular应用程序的RxJS驱动的状态管理库。

42.4K10

Angular 2 + 折腾记 :(3)初步了解服务及使用

前言 不探究高深理论,只探究实际使用,有更好的写法或者经验请指出; 有些暂时没涉及到的知识可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理的地方; Angular2...详情看这个; 【依赖注入:中】 【依赖注入:英】 看github上有些项目的service写的很复杂(很重),但是不大喜欢这样。 力求service内少处理复杂逻辑。...this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里的每个接口返回一个可观察的订阅对象 }复制代码 那么我们应该如何让服务可以正常使用呢...fadeIn], providers: [vehicleFaultService, EventsService] })复制代码 ---- 总结 服务若是结合@Inpu(),@Output()..感觉不需要ngrx...这种状态管理 服务可以贯穿全局(全局注入),事件广播这些都可以实现 服务不应该太重(比如处理一些复杂的逻辑),一个服务内部应该清晰,简洁。。

1.6K20

写在 2021: 值得关注学习的前端框架和工具库

Web React 状态管理 Jotai[2],原子化的状态管理思路(就像React官方的Recoil),亮点是API比Recoil简洁很多,对Suspense模式支持好,可以考虑用来代替useContext...AngularAngular[15] 是最近正在学的框架,在开始前其实是拒绝的,但写了两个例子之后觉得真香!...跨端 Taro[17],京东凹凸实验室出品,应该目前见到支持最多端的跨端框架(但问题也不少,这个没办法),一直没有用Taro写过一个完整应用,有机会会试试的。...NgRx[93],很好用的Angular状态管理方案,写法和Redux非常像,也是action >>> reducer >>> state,所以几乎可以没有什么成本的上手。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

4.1K10

Angular vs React 最全面深入对比

需要自我反思的问题: 和我的团队能否轻松学习并掌握? 是否适合的项目? 开发体验是否足够好?...无论如何,当你使用Angular时,您至少应该了解RxJS的基本知识。...这使得新项目的设置变得轻而易举。 Ionic 2 Ionic 2 是开发混合移动应用程序的流行框架的新版本。它提供了一个与Angular 2完美集成的Cordova容器,以及一个漂亮的材料组件库。 ...@ngrx/store @ngrx/store是由Redux启发的Angular状态管理库,基于由pure reducer进行突变的状态。...根据项目的大小和复杂性,找到并学习一些额外的库,这可能是棘手的一部分,但之后,一切都应该变得顺利。 其实,React的上手非常容易,最难的部分可能是如何挑选合适你项目或产品的类库。

3.8K70

写在2021: 值得关注学习的前端框架和工具库

AngularAngular最近正在学的框架,在开始前其实是拒绝的,但写了两个例子之后觉得真香!...image.png 跨端 Taro,京东凹凸实验室出品,应该目前见到支持最多端的跨端框架(但问题也不少,这个没办法),一直没有用Taro写过一个完整应用,有机会会试试的。...NgRx,很好用的Angular状态管理方案,写法和Redux非常像,也是action >>> reducer >>> state,所以几乎可以没有什么成本的上手。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects...E2E测试:Cypress / PlayWright,说实话很少能看到业务项目有完备的单元测试和集成测试,更不要说E2E测试了,因为的确要花不少时间。

2.8K10

2019 简易Web开发指南

Sublime Text,Atom 浏览器:Chrome,Firefox 设计/原型:Adobe XD,Photoshop,Sketch,Figma 命令行工具:Git Bash,WSL,iTerm2,...Hyper 版本管理:Git 前端 前端觉得是每个做web开发的同学都应该掌握的,就算是做后端开发的,基本的前端知识也是必不可少的。...HTML5 CSS3 Flexbox (简易教程),CSS Grid (简易教程) CSS Variables (Custom Properties) 响应式布局(Responsive Layout) 设置...Bootstrap Materialize Bulma JS框架 React:目前最流行 Vue:简单易用,越来越多人用 Angular:曾经很流行,现在有点衰退 状态管理(state management...) Redux VueX NgRx Apollo (GraphQL Client) 后端渲染(server side rendering) Next.js (React) Nuxt.js (Vue) Angular

2.3K41

【译】如何学习任意前端框架的

你决定学习框架x,你打开youtube或任何搜索引擎,搜索与x框架相关的任何教程,并在30分钟之后突然发出"Eureka"(高兴地表现)的尖叫--认为这个框架类似自己之前学过的框架。...在这篇文章中,将向你展示学习前端框架的经验以及这些框架如何彼此相似的。 每次你决定学习前端框架时,你定会反复听到这些术语(组件,路由和管理状态/状态管理)。...现在,所有框架都提供API来管理你的状态(例如Angular有一个Service,React现在有Context API)以及当你的数据规模变大之后,你可以考虑使用像redux这样的库。...给你插入的数据添加点样式 构建你的布局 主要的详细信息:列表结果将结果中的每个项目的链接添加到项目详细页面 了解如何将数据从母版页传递到详细信息页 2.Auth App 在上一节中提到的一些端点API...你将学到: 学习如何使用管理状态解决方案,如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成 使你的应用更灵活

3.6K10

2019-Web开发技术指南和趋势

以下内容来自我特别喜欢的一个Youtube频道: Traversy Media 这是一个2019年你成为前端,后端或全栈开发者的进阶指南: 你不需要学习所有的技术成为一个web开发者 这个指南只是通过简单分类列出了技术选项 将从的经验和参考中给出建议...构建静态站点 构建UI布局(拿到设计图能够使用HTML/CSS还原) 添加一些交互功能 部署和维护网站 现在能找到最低水平的Web开发工作, 但是这是远远不够的.... 2....HTML/CSS框架目前没有以前那么有意义, 但是还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的)....对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...像React, Vue 和 Angular等端架都可以进行服务端渲染 Next.js(React) Nuxt(Vue) Angular Universal(Angular) 3.5 内容管理系统 ?

3.3K20

同样做前端,为何差距越来越大?

一、基于 Redux 的状态管理 从2013年React发布至今已近6个年头,前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。...庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: ? 这三个问题我们是通过自研 iron-redux 库【1】来解决,以下是背后的思考: 如何组织 Action?...如何组织 Store/Reducer?...最终我们得到如下扁平的状态树。虽庞大但有序,你可以快速而明确的访问任何数据。 ? 如何减少样板代码? 使用原生 Redux,一个常见的请求处理如下。

1.2K20

2019-Web开发技术指南和趋势

以下内容来自我特别喜欢的一个Youtube频道: Traversy Media 这是一个2019年你成为前端,后端或全栈开发者的进阶指南: 你不需要学习所有的技术成为一个web开发者 这个指南只是通过简单分类列出了技术选项 将从的经验和参考中给出建议...构建静态站点 构建UI布局(拿到设计图能够使用HTML/CSS还原) 添加一些交互功能 部署和维护网站 现在能找到最低水平的Web开发工作, 但是这是远远不够的.... 2....HTML/CSS框架目前没有以前那么有意义, 但是还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的)....对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...像React, Vue 和 Angular等端架都可以进行服务端渲染 Next.js(React) Nuxt(Vue) Angular Universal(Angular) 3.5 内容管理系统 ?

3.3K20

给2019前端开发的你5个进阶建议~

一、基于 Redux 的状态管理 从2013年React发布至今已近6个年头,前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。...庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: 原则 方法 引发的问题 Single source of truth 组件 Stateless,数据来源于 Store 如何组织 Store?...对于 Fetch 返回的数据我们定义了 AsyncTuple 这种类型,减少了样板代码 明确的组织结构,第1层是 ROOT,第2层是各个页面,第3层是页面内的卡片,第4层是卡片的数据,这样划分最深处基本不会超过...Redux 状态如何减少样板代码? 使用原生 Redux,一个常见的请求处理如下。

99010

前端架构101:MVC的不足与Flux的崛起

首先 AngularJS(AngularJS 代指 1.x 版本,Angular 代指 2 以及之后的版本) 框架中也支持全局的事件机制,比如 broadcast, emit 等等。...Flux 把所有与 Flux 相似的框架在这里都称之为 Flux。包括但不限于:Redux,Mobx,Ngrx,Akita,React 等等。...在我看来它们都拥有和 Flux 相同的特征: 单向数据流 全局状态管理 store / selector / service 等概念的抽象 在谈论 Flux 之前我们先给 Flux 定一个性:Flux...剩下的具体概念你应该非常熟悉了 现在回过头再看 Flux,它其实是一个非常强约束的框架。...如果你开发的是 Angular 应用,Angular 本身,或是 Rxjs 又或是 TypeScript 哪一个单拎出来都不好对付,指望着人们自我学习或者培训的方式统一大家的水平更是天方夜谭。

1.4K20
领券