@ngrx/store-devtools 项目教程

@ngrx/store-devtools 项目教程

store-devtoolsDeveloper Tools for @ngrx/store项目地址:https://gitcode.com/gh_mirrors/st/store-devtools

1. 项目的目录结构及介绍

ngrx/store-devtools/
├── src/
│   ├── index.ts
│   ├── devtools.module.ts
│   ├── devtools.reducer.ts
│   ├── devtools.actions.ts
│   ├── devtools.selectors.ts
│   ├── devtools.effects.ts
│   └── devtools.service.ts
├── tests/
│   ├── devtools.spec.ts
│   └── devtools.effects.spec.ts
├── editorconfig
├── gitignore
├── npmignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── circle.yml
├── index.ts
├── package.json
├── rollup.config.js
├── tsconfig.dist.json
├── tsconfig.json
├── tslint.json
└── yarn.lock

目录结构介绍

• src/: 包含项目的源代码文件，如模块、动作、选择器、效果和服务等。
• tests/: 包含项目的测试文件，如单元测试和效果测试。
• editorconfig: 编辑器配置文件。
• gitignore: Git 忽略文件配置。
• npmignore: npm 忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• circle.yml: CircleCI 配置文件。
• index.ts: 项目入口文件。
• package.json: 项目依赖和脚本配置。
• rollup.config.js: Rollup 打包配置文件。
• tsconfig.dist.json: 生产环境 TypeScript 配置文件。
• tsconfig.json: 开发环境 TypeScript 配置文件。
• tslint.json: TSLint 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它负责导出项目的核心模块和功能，以便在 Angular 应用中使用。

// src/index.ts
export * from './devtools.module';
export * from './devtools.reducer';
export * from './devtools.actions';
export * from './devtools.selectors';
export * from './devtools.effects';
export * from './devtools.service';

启动文件介绍

• devtools.module.ts: 定义了 StoreDevtoolsModule，用于在 Angular 应用中启用 Redux Devtools 扩展。
• devtools.reducer.ts: 包含 Redux 状态的 reducer 函数。
• devtools.actions.ts: 定义了 Redux 动作。
• devtools.selectors.ts: 定义了 Redux 选择器，用于从状态中提取数据。
• devtools.effects.ts: 定义了 Redux 效果，用于处理异步操作。
• devtools.service.ts: 提供了与 Redux Devtools 扩展交互的服务。

3. 项目的配置文件介绍

package.json

{
  "name": "@ngrx/store-devtools",
  "version": "3.2.4",
  "description": "Developer Tools for @ngrx/store",
  "main": "index.js",
  "module": "index.js",
  "typings": "index.d.ts",
  "keywords": [
    "Angular",
    "Redux",
    "Store",
    "StoreDevtools",
    "NgRx",
    "Angular2",
    "Angular 2"
  ],
  "author": "NgRx",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/ngrx/store-devtools.git"
  },
  "bugs": {
    "url": "https://github.com/ngrx/store-devtools/issues"
  },
  "homepage": "https://github.com/ngrx/store-devtools#readme",
  "peerDependencies": {
    "@angular/core": "^4.0.0",
    "@ngr

store-devtoolsDeveloper Tools for @ngrx/store项目地址:https://gitcode.com/gh_mirrors/st/store-devtools