开源项目 ngrx/effects 使用教程

开源项目 ngrx/effects 使用教程

effectsSide effect model for @ngrx/store项目地址:https://gitcode.com/gh_mirrors/ef/effects

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

ngrx/effects 项目的目录结构如下：

/effects
├── src
│   ├── index.ts
│   ├── effects
│   │   ├── effect.spec.ts
│   │   ├── effect.ts
│   │   ├── effects.module.ts
│   │   ├── effects.spec.ts
│   │   ├── effects.ts
│   │   ├── index.ts
│   │   ├── metadata.ts
│   │   ├── toPayload.ts
│   │   └── util.ts
│   ├── operators
│   │   ├── concatMap.ts
│   │   ├── exhaustMap.ts
│   │   ├── mergeMap.ts
│   │   ├── switchMap.ts
│   │   └── withLatestFrom.ts
│   ├── testing
│   │   ├── index.ts
│   │   ├── provide_store.ts
│   │   ├── setup.ts
│   │   └── test_effect.ts
│   └── util
│       ├── index.ts
│       ├── is_stream.ts
│       ├── is_subscription.ts
│       ├── merge_effects.ts
│       ├── to_payload.ts
│       └── to_payload_factory.ts
├── package.json
├── tsconfig.json
└── README.md

目录结构介绍

• src/index.ts: 项目的入口文件。
• src/effects/: 包含与 effects 相关的核心文件，如 effect 的定义、模块、测试等。
• src/operators/: 包含一些常用的 RxJS 操作符，用于处理 effects 中的数据流。
• src/testing/: 包含用于测试 effects 的辅助工具和配置。
• src/util/: 包含一些通用的工具函数。
• package.json: 项目的依赖管理和脚本配置。
• tsconfig.json: TypeScript 的编译配置。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它导入了 effects 模块并提供了项目的入口点。

export * from './effects';
export * from './operators';
export * from './testing';
export * from './util';

启动文件介绍

• src/index.ts: 导出了 effects 模块、操作符、测试工具和通用工具，使得这些功能可以在其他项目中使用。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 tsconfig.json。

package.json

package.json 文件包含了项目的依赖管理、脚本配置和其他元数据。

{
  "name": "@ngrx/effects",
  "version": "13.0.0",
  "description": "Side effect model for @ngrx/store",
  "repository": {
    "type": "git",
    "url": "https://github.com/ngrx/effects.git"
  },
  "keywords": [
    "RxJS",
    "Angular",
    "Redux",
    "Effects",
    "Side Effects"
  ],
  "author": "Mike Ryan",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ngrx/effects/issues"
  },
  "homepage": "https://github.com/ngrx/effects",
  "peerDependencies": {
    "@angular/core": "^13.0.0",
    "@ngrx/store": "^13.0.0",
    "rxjs": "^6.5.3 || ^7.4.0"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

tsconfig.json

tsconfig.json 文件包含了 TypeScript 的编译配置。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecor

effectsSide effect model for @ngrx/store项目地址:https://gitcode.com/gh_mirrors/ef/effects