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

有没有在Angular 7上用一个命令创建ngrx/Store的例子?

是的,可以使用以下命令在Angular 7上创建一个ngrx/Store的示例:

  1. 首先,确保您的Angular开发环境已经设置好,并且您已经创建了一个Angular项目。
  2. 在命令行中导航到您的项目根目录。
  3. 运行以下命令来安装ngrx/store和相关依赖:
代码语言:txt
复制
npm install @ngrx/store
  1. 然后,在您的Angular项目中创建一个新的store目录,用于存放所有的ngrx相关代码。
代码语言:txt
复制
mkdir store
  1. 导航到store目录,并创建一个新的counter目录,用于创建一个计数器示例。
代码语言:txt
复制
cd store
mkdir counter
cd counter
  1. 在counter目录中,创建一个新的counter.actions.ts文件,用于定义计数器相关的action。
代码语言:txt
复制
// counter.actions.ts

import { createAction, props } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');
  1. 创建一个新的counter.reducer.ts文件,用于定义计数器相关的reducer。
代码语言:txt
复制
// counter.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export interface CounterState {
  count: number;
}

export const initialState: CounterState = {
  count: 0
};

export const counterReducer = createReducer(
  initialState,
  on(increment, state => ({ ...state, count: state.count + 1 })),
  on(decrement, state => ({ ...state, count: state.count - 1 })),
  on(reset, state => ({ ...state, count: 0 }))
);
  1. 创建一个新的index.ts文件,用于将action和reducer导出并组合成一个ngrx store。
代码语言:txt
复制
// index.ts

import { ActionReducerMap } from '@ngrx/store';
import { counterReducer, CounterState } from './counter.reducer';

export interface AppState {
  counter: CounterState;
}

export const reducers: ActionReducerMap<AppState> = {
  counter: counterReducer
};
  1. 最后,在您的Angular组件中使用ngrx store。首先,导入所需的依赖:
代码语言:txt
复制
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement, reset } from './store/counter/counter.actions';
import { Observable } from 'rxjs';
import { AppState } from './store';
  1. 在组件类中定义所需的变量和方法:
代码语言:txt
复制
@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <div>Current Count: {{ count$ | async }}</div>
      <button (click)="decrement()">Decrement</button>
      <button (click)="reset()">Reset</button>
    </div>
  `
})
export class AppComponent {
  count$: Observable<number>;

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

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

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

  reset() {
    this.store.dispatch(reset());
  }
}
  1. 最后,在模块中配置store。在您的app.module.ts文件中导入所需的依赖并将其添加到NgModule的providers数组中:
代码语言:txt
复制
// app.module.ts

import { StoreModule } from '@ngrx/store';
import { reducers } from './store';

@NgModule({
  imports: [
    // other imports
    StoreModule.forRoot(reducers)
  ],
  // other configurations
})
export class AppModule { }

这样,您就创建了一个基于ngrx/store的计数器示例。您可以通过点击按钮来增加、减少和重置计数器的值,并通过异步管道(async pipe)在模板中显示当前计数器的值。

请注意,上述示例是为Angular 7创建的。在其他版本的Angular中,可能会有一些差异。此外,ngrx/store是用于状态管理的一种方式,可用于更复杂的应用程序和组件之间的状态共享。有关更多信息,请参阅腾讯云的ngrx/store相关文档和示例:

希望这能帮到您!如果您对其他内容有疑问,请随时提问。

相关搜索:如何在Angular 7上用延迟的Click显示一个表单?在angular 7中用注入的html绑定一个函数有没有办法用Python在Hive上创建一个数据库?有没有办法用f#创建一个有多个选项的菜单?通过传递命令有没有办法在画布上为我的游戏创建一个按钮?有没有办法在ImageMagick上按颜色创建一个等值的区域?尝试创建一个选择7位数并在彩票上尝试的程序,有没有更简单的方法?有没有办法在GKE上用一个稳定的IP地址启动一个Airflow worker?如何创建一个在命令上赋予角色的不协调机器人在Excel中,有没有办法把用"Text to Colums“分隔的列变成它们自己的行?里面给出了一个例子我无法在Angular7中使用'ng new myworkspace‘命令创建工作区。可能的原因是什么在ubunu中安装Angular CLI错误-当我尝试在我的ubuntu机器上运行angular CLI命令时,我得到了一个错误使用Python在Dropbox上创建一个空文件夹。有没有更简单的方法?有没有办法根据当前用户的位置在MKMapView上创建一个大头针(一个注释)?Slurm作业数组:有没有办法在slurm上创建一个在不同时间开始的作业数组?有没有可能在做完一个动作后,或者在我的例子中,在calender中创建一个事件,然后使用JavaScript自动向下滚动页面?有没有办法在安卓中创建一个应用程序,可以立即复制在WhatsApp上收到的所有消息?使用ansible Ad-Hoc命令在/ folder1 /ubuntu/ location的“主机”机器上创建一个文件夹如何组合来自可观测数据的数据,这些数据是在Angular 7和RsJS中的另一个可观测结果上的循环中获取的?在angular中创建一个移动应用程序,并在装有cordova的android设备上运行它,并使用cordova插件
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

    Angular CLI运行webpack dev服务器,该服务器将我们的应用呈现在下一个空闲端口上(以便您可以在同一台机器上运行多个应用),并进行实时重新加载。...想想像这样:我们刚刚实现了在我们的表单发生变化时调用的代码。如果我们用承诺处理用户更改,则只有第一个用户更改会在我们需要重新订阅之前处理。...但并非完全 - 每一个国家都是不变的,但是Store,这是我们访问的方式State,实际上是一个国家的可观察。因此,State价值流中的一个值是单一的Store。...两者都是不可变的,但第二个是基于第一个的,所以State我们创建一个新的State对象,而不是在我们的变异值上。...为此,让我们在我们的控制台中运行: yarn add @ngrx/core @ngrx/store ngrx-store-logger yarn add v1.3.2 [1/4] ?

    42.7K10

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

    就盯着一个方向甚至是一个框架吃透,在简历上,“了解过A、B、C,使用过D、E、F” 绝对不如 “深入了解A原理,精通B架构实现,C的collaborator/maintainer之一”。...Immer[14],思路巧妙的数据不可变方案。 Angular! Angular[15] 是我最近正在学的框架,在开始前我其实是拒绝的,但写了两个例子之后我觉得真香!...Ionic[20],出现比较早的一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题(所以Angular YES)。...NodeJS NestJS[24],一个大而全的Node框架,就像NodeJS里的Angular,实际上作者也是受到了Angular的影响,很多装饰器都和Ng中的同名。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    4.2K10

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

    庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...如何组织 Store/Reducer?...单拿其中的【开发】环节展开,就有很多可扩展的场景: ? 一个有代表性的例子是,我们开发了国际化工具 kiwi【7】。...它同样具有 TS 的类型完美,非常强大的文案提示,另外还有: VS Code 插件 kiwi linter【8】,自动对中文文案标红,如果已有翻译文案能自动完成替换; Shell 命令全量检查出没有翻译的文案...除了以上三点,未来还计划开发浏览器插件来检查漏翻文案,利用 Husky 在 git 提交前对漏翻文案自动做机器翻译等等。 未来如果你只提供一个代码库,那它的价值会非常局限。

    1.2K20

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

    庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: 原则 方法 引发的问题 Single source of truth 组件 Stateless,数据来源于 Store 如何组织 Store?...与此同时 Sass/Less 社区也在飞速发展,尤其是 Stylelint 的成熟,可以通过技术约束的手段来避免 CSS 的 Bad Parts。...单拿其中的【开发】环节展开,就有很多可扩展的场景: ? 一个有代表性的例子是,我们开发了国际化工具 kiwi-intl。...它同样具有 TS 的类型完美,非常强大的文案提示,另外还有: VS Code 插件 kiwi linter,自动对中文文案标红,如果已有翻译文案能自动完成替换 Shell 命令全量检查出没有翻译的文案,

    1K10

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

    正文从这开始~~ MVC 的不足 事件 在前几篇中,我演示了一个前端 Backbone.js MVC 框架用于解决实际问题的例子。...我们抽取 store 来保证唯一数据源(single source of truth),所有的业务逻辑也都封装在 store 中,避免了用例和服务层(对应后端 service layer)方法散落在各个...注意 store 层工作是不会引起任何的副作用的,在 store 完成上一个 action 的工作之前,不会有其他的 action 再次经过 dispatch 达到 store。...到了在 store 中新增字段的这一个环节,无论是你是使用 Redux 还是 Mobx 相信你都能迅速的找到对应的 model / reducer 在哪。...如果你开发的是 Angular 应用,Angular 本身,或是 Rxjs 又或是 TypeScript 哪一个单拎出来都不好对付,指望着人们自我学习或者培训的方式统一大家的水平更是天方夜谭。

    1.4K20

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

    就盯着一个方向甚至是一个框架吃透,在简历上,“了解过A、B、C,使用过D、E、F” 绝对不如 “深入了解A原理,精通B架构实现,C的collaborator/maintainer之一”。...Immer,思路巧妙的数据不可变方案。 Angular! Angular 是我最近正在学的框架,在开始前我其实是拒绝的,但写了两个例子之后我觉得真香!...Ionic,出现比较早的一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题(所以Angular YES)。...NodeJS NestJS,一个大而全的Node框架,就像NodeJS里的Angular,实际上作者也是受到了Angular的影响,很多装饰器都和Ng中的同名。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    2.9K10

    8分钟为你详解React、Angular、Vue三大框架

    基本用法 下面是一个简单的React在HTML中使用JSX和JavaScript的例子。 ? Greeter函数是一个React组件,它接受一个属性问候语。...JSX代码的一个例子: ? 嵌套元素 同一层次上的多个元素需要被包裹在一个容器元素中,如上图中的元素。 属性 JSX提供了一系列的元素属性,旨在对应HTML提供的属性。...支持Angular Universal,可以在服务器上运行Angular应用程序。 版本9 Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。...常用命令 从终端上,全局安装Angular CLI: npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区: ng new my-project-name...从高层次的角度看,组件是Vue编译器附加行为的自定义元素。在Vue中,组件本质上就是一个带有预设选项的Vue实例。下面的代码片段包含了一个Vue组件的例子。

    22.2K20

    Angular vs React 最全面深入对比

    Angular Angular CLI 现代框架的流行趋势是使用CLI工具,可以帮助您引导项目,而无需自行配置构建。Angular有Angular CLI。它允许您仅使用几个命令来生成和运行项目。...Angular universal Angular universal是一个种子项目,可用于创建支持服务器端渲染的项目。...@ngrx/store @ngrx/store是由Redux启发的Angular的状态管理库,基于由pure reducer进行突变的状态。...可以生成一个新的工程,启动开发服务器并创建绑定。Jest(来自Facebook的一个单元测试工具)也同时集成在Create-react-app内部,更方便的让我们进行单元测试。...Next.js Next.js 是React应用程序的服务器端呈现的框架。它提供了一种在服务器上完全或部分呈现应用程序的灵活方式,将结果返回给客户端并在浏览器中继续。

    3.8K70

    Angular 面试题汇总2-ComponentService (Angular v8+)

    样式的作用域、Shadow DOM 关于Angular Service 单例服务(singleton) forRoot() 模式 关于Angular Component css样式的作用域、Shadow...单例服务(singleton) 使用Angular CLI创建服务,默认会创建单例服务; 把 @Injectable() 的 providedIn 属性声明为 root, 即为单例服务。...对于复杂的全局变量,推荐使用状态管理组件(state management – Ngrx)。...forRoot() 模式 如果多个调用模块同时定义了 providers (服务),那么在多个特性模块中加载此模块时,这些服务就会被注册在多个地方。...这会导致出现多个服务实例,并且该服务的行为不再像单例一样 。有多种方式来防止这种现象: 用 providedIn 语法代替在模块中注册服务的方式。 把服务分离到它们自己的模块中。

    954140

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

    前言 不探究高深理论,只探究实际使用,有更好的写法或者经验请指出; 有些暂时没涉及到的知识我可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理的地方; Angular2...这可能和每个人的开发理念不一样。。举一个例子,看代码。...{ return this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里的每个接口返回一个可观察的订阅对象...大致有那么两种; 模块内注入,整个模块内的components皆可以使用 import { NgModule } from '@angular/core'; -- 内置 // 除了根模块用...这种状态管理 服务可以贯穿全局(全局注入),事件广播这些都可以实现 服务不应该太重(比如处理一些复杂的逻辑),一个服务内部应该清晰,简洁。。

    1.6K20

    前端框架选择指南:React vs Vue vs Angular

    模板语法: 自己的模板系统,支持双向数据绑定。状态管理: 提供NgRx等库进行状态管理。适合: 大型企业级项目,需要严格结构和规范的团队。...Angular: 严格的架构和模块化,适合大型项目,但过度复杂可能导致学习成本增加。企业支持React: Facebook的开源项目,广泛应用于各种公司。...Angular: 由于其全栈性质,Angular项目通常更难迁移到其他框架,但Angular Elements可以创建Web Components,提供一定程度的跨框架兼容性。...Vue: 有vue-i18n库,提供便捷的国际化支持。Angular: 提供ng serve --i18n 和 ng xi18n 命令,以及Angular i18n工具链,内置支持。...如果需要一个完整的解决方案,包括路由、状态管理和服务,Angular可能更合适。总结选择React、Vue还是Angular没有绝对的“最好”,每个框架都有其独特的优点和适用场景。

    16900

    这些必备的VSCode JavaScript插件你都用过吗?

    Rest Client(相较于用浏览器或者一个CURL程序来测试你的REST API端点,你可以安装这个工具,直接在编辑器里相互性地发HTTP请求。)...Angular 6(提供Angular 6的代码片段,支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。...目前有220多万的下载量和172个Angular代码片段。) Angular v5 snippets(提供针对TypeScript、RxJS、HTML和Docker文件的代码片段。...目前有270多万的下载量。) React Native/React/Redux snippets for es6/es7(提供对这些框架的ES6/ES7语法的代码片段。)...它带有很好的发布在GitBook上的文档。) Ember(为Ember提供了命令行支持和智能提示。安装完后,所有ember cli的命令可直接在VS Code自己的命令行列表中使用。)

    6K10

    作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

    Rest Client:相较于用浏览器或者一个CURL程序来测试你的REST API端点,你可以安装这个工具,直接在编辑器里相互性地发HTTP请求。 7....Angular 6:提供Angular 6的代码片段,支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。...目前有270多万的下载量。 React Native/React/Redux snippets for es6/es7:提供对这些框架的ES6/ES7语法的代码片段。...它带有很好的发布在GitBook上的文档。 Ember:为Ember提供了命令行支持和智能提示。安装完后,所有ember cli的命令可直接在VS Code自己的命令行列表中使用。...插件包 现在我们来到了最后一类,我想让你知道,VS Code市场有有一个插件包的分类。本质上,它们是相关联的一些VS Code插件的集合,打成一个包,方便安装。

    2.9K10

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

    Git绝对是每一个Web开发者必须掌握的工具, 这里也有一些其他的工作流工具的建议., 基础的命令行( touch, cd, mkdir什么的总得会, 命令行在下面的工具中都会用到) Git(版本控制)...对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...变量, 函数等类型 类 其他ES6的特性 在Angular中被使用到, 同时也可以在React和Vue中被使用 4.5 无服务架构 ?...无需创建和管理自己的服务器 使用第三服务执行“无服务器功能” 例如 AWS, Netify & Firebase 在Gatsby静态站点生成器很流行 无服务框架 4.6 AI和机器学习 ?...Progressive Web Apps是一个web app但是在功能和样式上给用户带来原生应用使用体验的一项技术.

    3.4K20
    领券