Angular状态管理框架NgRx入门

ngrx概念

• 一个框架
• 用于构建Angular8响应式应用
• 用于状态管理
• 使用可观察对象
• 使用Typescript
• 使用OnPush策略，变更检测更高效
• 状态序列化存储
• 易于测试

原理图

• component产生action(事件)
• action触发effect，业务处理数据
• store中存储state、reducer
• reducer产生新的state
• state修改，更新component

简单入门

初始化项目

ng new ngrx-demo

> ng new ngrx-demo 
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/
documentation/syntax#scss                ]
CREATE ngrx-demo/README.md (1026 bytes)
CREATE ngrx-demo/.editorconfig (246 bytes)
CREATE ngrx-demo/.gitignore (631 bytes)
CREATE ngrx-demo/angular.json (3705 bytes)
CREATE ngrx-demo/package.json (1295 bytes)
CREATE ngrx-demo/tsconfig.json (543 bytes)
CREATE ngrx-demo/tslint.json (1953 bytes)
CREATE ngrx-demo/browserslist (429 bytes)
CREATE ngrx-demo/karma.conf.js (1021 bytes)
CREATE ngrx-demo/tsconfig.app.json (270 bytes)
CREATE ngrx-demo/tsconfig.spec.json (270 bytes)
CREATE ngrx-demo/src/favicon.ico (948 bytes)
CREATE ngrx-demo/src/index.html (294 bytes)
CREATE ngrx-demo/src/main.ts (