要使用哪个版本 ?
角 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/ 仓库
角绑定 复数。 。 。 .
角 1 见 纳克-雷克
什么是雷杜克吗?
Redux是应用中管理状态的流行方法. 它强调:
- 一个单一的,不可改变的数据库.
- 单向数据流.
- 一种基于纯函数的变革方法和一流的行动.
这里可以找到很多优秀的文档: 复数。 。 。 .
@angular-redux是什么?
我们提供一套 npm 软件包, 帮助您整合您的 redux 商店 输入您的 Angular 2+ 应用程序。 我们的方法帮助你弥补差距 具有Angular的一些先进特征,包括:
- 使用 RxJS 的可观测值更改处理 .
- 编译时间优化
NgModule和前期汇编. - 与角变化探测器相融合.
开始
- 我已经知道Redux和RxJS是什么了. 给我TL; DR。 。 。 .
- 我只是在学习Redux. 帮我拆开来啊!
- 说话很便宜. 显示一个完整的代码示例。 。 。 .
- 带我去 API 文件。 。 。 .
安装
@angular-redux/store 对redux有同伴依赖,所以我们需要安装它.
npm install --save redux @angular-redux/store
快速启动
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './containers/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
导入 NgReduxModule 类并添加到您的应用程序模块中作为
import一旦你这样做,你就可以注射 NgRedux 进入您的
角形组件. 在你的顶级应用模块中,你
可以配置您的 Redux 存储器, 带有还原器, 初始状态,
以及可选的中间器件和增强器件,如您在 Redux 中直接使用.
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() 函数代替:
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中间软件: 重新调色器。这只是展示 关闭
@angular-redux/store和您一样的 Redux 中间软件确实兼容 也许吧.请注意,要使用它, 你需要安装它与
npm install --save redux-logger及其定义类型npm install --save-dev @types/redux-logger。 。 。 .
现在,你的Angular应用程序被重新更新了! 使用 @select 装饰器改为
访问您的商店状态,以及 .dispatch() 发送行动:
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 正在操作的套件系列 :
配套软件包
资源
深度使用
@angular-redux/store 使用基于 RxJS 观测器的再程序 select 转换
数据从商店中走出来,进入你的UI或副作用处理器。 观察器
是一个高效的模拟到 reselect 为RxJS-重角世界.
更多信息: 选择模式
我们有一些“烹饪手册” 用于特定的角质主题:
- 使用 Angular 依赖性喷射器与动作创建者
- 使用 Angular 的依赖性喷射器与中件
- 用可被再观察的 Epics 管理侧面效果
- 使用 Redux DevTools Chrome 扩展
- @ angular- redux/ store 和 ImmutableJS
- 强键还原器
在角-红外/商店打包
想要黑入角-redux/商店或任何相关的包? 随你便 但请在做公关前测试一下你的改动.
是这样的:
- 写作单位测试. 你可以通过跑步检查他们是否工作
npm test。 。 。 . - 运行电线。 如果你的编辑不自动做,就做吧
手动使用
npm run lint。 。 。 . - 在现实世界中测试你的变化 我们使用 示例应用程序 对于这个,使用一些 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.