# @angular-redux/store 中文文档

规范地址：https://npmcn.com/package/%40angular-redux/store/

版本：10\.0\.0
npm 元数据更新时间：2022-06-12T14:41:44.428Z
中文译文更新时间：2026-11-06T04:15:43.137Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angular-redux/store
原文对照：https://npmcn.com/package/%40angular-redux/store/?lang=original
项目主页：https://github.com/angular-redux/platform
源码仓库：https://github.com/angular-redux/platform

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：651 kB，91 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8
- 运行依赖：0 个
- peer 依赖：@angular/core ^7\.0\.0，redux ^4\.0\.0，rxjs ^6\.0\.0
- 首次发布：2017-01-10T03:42:27.732Z
- 最新版本发布：2019-05-04T20:49:19.823Z
- 近 30 天下载量：24091（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：84（近 12 个月 0 个）

## 中文简介

Redux 的角绑定

## 安装

```sh
npm install @angular-redux/store
```

也可以使用：`pnpm add @angular-redux/store`、`yarn add @angular-redux/store`、`bun add @angular-redux/store`

## README

# 要使用哪个版本 ?

## 角 6+ 单相

`@angular-redux/store@^9` 这是你需要的。 这消耗了从RxJS和Angular 6中突破的更改,以及从Redux 4中更新的型号defs.

## 角数 5

使用 `@angular-redux/store@^7` - 此版本支持Angular 5, 并更改使用可忽略操作符 .

## 角数 4 或以下

使用 `@angular-redux/store@^6` - 这支持角4 更早.

# 支助 `@angular-redux/store@6`? 吗?

如果可能的话,我将维持和运用v7的任何修正/增强到v6中,因为它没有引入突破性变化.

我犯了一些错误,试图将修正 / 等发布到两个主要版本, 这导致了一些发布 被错误地标记,并造成了一些混乱。 很遗憾这造成了任何混乱,而且今后最好避免出现这种情况,并更加透明地发布消息.

# @ angular- redux/ 仓库

角绑定 [复数](https://github.com/reactjs/redux)。 。 。 .

角 1 见 [纳克-雷克](https://github.com/wbuchwalter/ng-redux)

[![Join the chat at https://gitter.im/angular-redux/ng2-redux](https://badges.gitter.im/angular-redux/ng2-redux.svg)](https://gitter.im/angular-redux/ng2-redux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![CircleCI](https://img.shields.io/circleci/project/github/angular-redux/store.svg)](https://github.com/angular-redux/store) [![npm version](https://img.shields.io/npm/v/@angular-redux/store.svg)](https://www.npmjs.com/package/@angular-redux/store) [![downloads per month](https://img.shields.io/npm/dm/@angular-redux/store.svg)](https://www.npmjs.com/package/@angular-redux/store)

## 什么是雷杜克吗?

Redux是应用中管理状态的流行方法. 它强调:

-   一个单一的,不可改变的数据库.
-   单向数据流.
-   一种基于纯函数的变革方法和一流的行动.

这里可以找到很多优秀的文档: [复数](http://redux.js.org/)。 。 。 .

## @angular-redux是什么?

我们提供一套 npm 软件包, 帮助您整合您的 redux 商店 输入您的 Angular 2+ 应用程序。 我们的方法帮助你弥补差距 具有Angular的一些先进特征,包括:

-   使用 RxJS 的可观测值更改处理 .
-   编译时间优化 `NgModule` 和前期汇编.
-   与角变化探测器相融合.

## 开始

-   我已经知道Redux和RxJS是什么了. [给我TL; DR](https://npmcn.com/package/%40angular-redux/store/articles/quickstart.md)。 。 。 .
-   我只是在学习Redux. [帮我拆开](https://npmcn.com/package/%40angular-redux/store/articles/intro-tutorial.md)来啊!
-   说话很便宜. [显示一个完整的代码示例](https://github.com/angular-redux/example-app)。 。 。 .
-   带我去 [API 文件](https://angular-redux.github.io/store)。 。 。 .

## 安装

`@angular-redux/store` 对redux有同伴依赖,所以我们需要安装它.

```sh
npm install --save redux @angular-redux/store
```

## 快速启动

```typescript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './containers/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
```

导入 `NgReduxModule` 类并添加到您的应用程序模块中作为 `import`一旦你这样做,你就可以注射 `NgRedux` 进入您的 角形组件. 在你的顶级应用模块中,你 可以配置您的 Redux 存储器, 带有还原器, 初始状态, 以及可选的中间器件和增强器件,如您在 Redux 中直接使用.

```typescript
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

interface IAppState {
  /* ... */
}

@NgModule({
  /* ... */
  imports: [, /* ... */ NgReduxModule],
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.configureStore(rootReducer, {}, [createLogger()]);
  }
}
```

或者如果你更喜欢自己创建Redux商店的话,你可以做到这一点并使用 `provideStore()` 函数代替:

```typescript
import {
  applyMiddleware,
  Store,
  combineReducers,
  compose,
  createStore,
} from 'redux';
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

interface IAppState {
  /* ... */
}

export const store: Store<IAppState> = createStore(
  rootReducer,
  applyMiddleware(createLogger()),
);

@NgModule({
  /* ... */
  imports: [, /* ... */ NgReduxModule],
})
class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.provideStore(store);
  }
}
```

> 请注意,我们也在使用来自社区的Redux中间软件: [重新调色器](https://www.npmjs.com/package/redux-logger)。这只是展示 关闭 `@angular-redux/store` 和您一样的 Redux 中间软件确实兼容 也许吧.
> 
> 请注意,要使用它, 你需要安装它与 `npm install --save redux-logger` 及其定义类型 `npm install --save-dev @types/redux-logger`。 。 。 .

现在,你的Angular应用程序被重新更新了! 使用 `@select` 装饰器改为 访问您的商店状态,以及 `.dispatch()` 发送行动:

```typescript
import { select } from '@angular-redux/store';

@Component({
  template:
    '<button (click)="onClick()">Clicked {{ count | async }} times</button>',
})
class App {
  @select() count$: Observable<number>;

  constructor(private ngRedux: NgRedux<IAppState>) {}

  onClick() {
    this.ngRedux.dispatch({ type: INCREMENT });
  }
}
```

## 实例

以下是一些实例: `angular-redux` 正在操作的套件系列 :

-   [动物园动物综合示例App](https://github.com/angular-redux/platform/blob/master/packages/example-app)

## 配套软件包

-   [用 @angular-redux/ router 重新校正您的路线](https://github.com/angular-redux/platform/blob/master/packages/router)
-   [用 @angular-redux/form重新校正您的表格](https://github.com/angular-redux/platform/blob/master/packages/form)

## 资源

-   [使用Redux与Angular - JS 多伦多交会 2016-07-12](https://www.youtube.com/watch?v=s4xr2avwv3s)
-   [开始使用 Redux](https://egghead.io/courses/getting-started-with-redux)
-   [伟大的雷杜克:社区资源](https://github.com/xgrommx/awesome-redux)

## 深度使用

`@angular-redux/store` 使用基于 RxJS 观测器的再程序 `select` 转换 数据从商店中走出来,进入你的UI或副作用处理器。 观察器 是一个高效的模拟到 `reselect` 为RxJS-重角世界.

更多信息: [选择模式](https://npmcn.com/package/%40angular-redux/store/articles/select-pattern.md)

我们有一些“烹饪手册” 用于特定的角质主题:

-   [使用 Angular 依赖性喷射器与动作创建者](https://npmcn.com/package/%40angular-redux/store/articles/action-creator-service.md)
-   [使用 Angular 的依赖性喷射器与中件](https://npmcn.com/package/%40angular-redux/store/articles/di-middleware.md)
-   [用可被再观察的 Epics 管理侧面效果](https://npmcn.com/package/%40angular-redux/store/articles/epics.md)
-   [使用 Redux DevTools Chrome 扩展](https://npmcn.com/package/%40angular-redux/store/articles/redux-dev-tools.md)
-   [@ angular- redux/ store 和 ImmutableJS](https://npmcn.com/package/%40angular-redux/store/articles/immutable-js.md)
-   [强键还原器](https://npmcn.com/package/%40angular-redux/store/articles/strongly-typed-reducers.md)

## 在角-红外/商店打包

想要黑入角-redux/商店或任何相关的包? 随你便 但请在做公关前测试一下你的改动.

是这样的:

1.  写作单位测试. 你可以通过跑步检查他们是否工作 `npm test`。 。 。 .
2.  运行电线。 如果你的编辑不自动做,就做吧 手动使用 `npm run lint`。 。 。 .
3.  在现实世界中测试你的变化 我们使用 [示例应用程序](https://github.com/angular-redux/example-app) 对于这个,使用一些 npm 用于“ 本地打印软件包” 的假称 :

-   复制示例应用程序( e)`git clone https://github.com/angular-redux/example-app.git`(中文(简体) )
-   生成“ 本地软件包” (`cd` 给您的 `angular-redux/store` 复制和运行 `npm pack`) (中文(简体) ). 这将创建一个 `.tgz` 文档.
-   将您的“ 本地软件包” 连接到您的示例应用( r)`cd` 复制并运行 `npm install --save /path/to/the/tgz/file/from/above`(中文(简体) )
-   运行 `ng serve --aot`

请确保您的修改通过 Angular 的 AoT 编译器,因为它与 TS 语法有点finicky.

## 常见问题

### @angular-redux/store 是什么？

Redux 的角绑定

### 如何安装 @angular-redux/store？

在项目目录运行 npm install @angular-redux/store，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^7\.0\.0）、redux（^4\.0\.0）、rxjs（^6\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @angular-redux/store 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/angular-redux\_\_store 是否存在。

### @angular-redux/store 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @angular-redux/store 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @angular-redux/store 可以商用吗？

@angular-redux/store 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular-redux/store 的下载量有多少？

根据 npm 官方下载统计，@angular-redux/store 在 2026/10/06 – 2026/11/04 这 30 天内被下载 24,091 次，日均约 803 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angular-redux/store 还在维护吗？

最新版本 10\.0\.0 发布于 2019/05/05（7 年前）；至今共发布 84 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。