我没有找到关于这个库的任何有用信息或者它的用途是什么。 好像ngrx/effects向已经知道这个概念的开发人员解释这个库，并给出一个关于如何编码的更重要的例子。
我的问题:
- 什么是行动来源？
- ngrx/effects 库的用途是什么；仅使用 ngrx/store 的缺点是什么？
- 什么时候推荐使用？
- 它是否支持 angular rc 5+？我们如何在 rc 5+ 中配置它？
谢谢!
最佳答案
主题太宽泛。它将像一个教程。无论如何我都会试一试。在正常情况下，您将有一个 action、reducer 和一个 store。 Action 由 store 调度，由 reducer 订阅。然后 reducer 作用于 Action ，并形成一个新的状态。示例中，所有状态都在前端，但在真正的应用程序中，需要调用后端DB或MQ等，这些调用有副作用。用于将这些影响分解到一个共同位置的框架。
假设您将个人记录保存到数据库中，action: Action = {type: SAVE_PERSON, payload: person}。通常你的组件不会直接调用 this.store.dispatch( {type: SAVE_PERSON, payload: person} ) 让 reducer 调用 HTTP 服务，而是调用 this.personService .save(person).subscribe( res => this.store.dispatch({type: SAVE_PERSON_OK, payload: res.json}) )。添加现实生活中的错误处理时，组件逻辑会变得更加复杂。为避免这种情况，只需调用即可
this.store.dispatch( {type: SAVE_PERSON, payload: person} ) 来自你的组件。
这就是效果库的用途。它就像 reducer 前面的 JEE servlet 过滤器。它匹配ACTION类型(filter可以匹配java世界的urls)然后作用于它，最后返回一个不同的action，或者没有action，或者多个action。然后reducer响应effects的输出 Action 。
继续前面的示例，使用效果库:
@Effects() savePerson$ = this.stateUpdates$.whenAction(SAVE_PERSON)
.map<Person>(toPayload)
.switchMap( person => this.personService.save(person) )
.map( res => {type: SAVE_PERSON_OK, payload: res.json} )
.catch( e => {type: SAVE_PERSON_ERR, payload: err} )
编织逻辑集中在所有 Effects 和 Reducers 类中。它很容易变得更复杂，同时这种设计使其他部分更简单，更可重用。
比如UI有自动保存加手动保存，为了避免不必要的保存，UI自动保存部分可以只通过定时器触发，手动部分可以通过用户点击触发。两者都会发送 SAVE_CLIENT 操作。效果拦截器可以是:
@Effects() savePerson$ = this.stateUpdates$.whenAction(SAVE_PERSON)
.debounce(300).map<Person>(toPayload)
.distinctUntilChanged(...)
.switchMap( see above )
// at least 300 milliseconds and changed to make a save, otherwise no save
电话
...switchMap( person => this.personService.save(person) )
.map( res => {type: SAVE_PERSON_OK, payload: res.json} )
.catch( e => Observable.of( {type: SAVE_PERSON_ERR, payload: err}) )
只有在出现错误时才有效。抛出错误后流就死了，因为 catch 尝试在外部流上进行尝试。调用应该是
...switchMap( person => this.personService.save(person)
.map( res => {type: SAVE_PERSON_OK, payload: res.json} )
.catch( e => Observable.of( {type: SAVE_PERSON_ERR, payload: err}) ) )
或另一种方式:更改所有 ServiceClass 服务方法以返回 ServiceResponse，其中包含来自服务器端的错误代码、错误消息和包装的响应对象，即
export class ServiceResult {
error: string;
data: any;
hasError(): boolean {
return error != undefined && error != null; }
static ok(data: any): ServiceResult {
let ret = new ServiceResult();
ret.data = data;
return ret;
}
static err(info: any): ServiceResult {
let ret = new ServiceResult();
ret.error = JSON.stringify(info);
return ret;
}
}
@Injectable()
export class PersonService {
constructor(private http: Http) {}
savePerson(p: Person): Observable<ServiceResult> {
return http.post(url, JSON.stringify(p)).map(ServiceResult.ok);
.catch( ServiceResult.err );
}
}
@Injectable()
export class PersonEffects {
constructor(
private update$: StateUpdates<AppState>,
private personActions: PersonActions,
private svc: PersonService
){
}
@Effects() savePerson$ = this.stateUpdates$.whenAction(PersonActions.SAVE_PERSON)
.map<Person>(toPayload)
.switchMap( person => this.personService.save(person) )
.map( res => {
if (res.hasError()) {
return personActions.saveErrAction(res.error);
} else {
return personActions.saveOkAction(res.data);
}
});
@Injectable()
export class PersonActions {
static SAVE_OK_ACTION = "Save OK";
saveOkAction(p: Person): Action {
return {type: PersonActions.SAVE_OK_ACTION,
payload: p};
}
... ...
}
对我之前评论的一个更正:Effect-Class 和 Reducer-Class，如果您同时让 Effect-class 和 Reducer-class 对同一 Action 类型使用react，Reducer-class 将首先使用react，然后是 Effect-class。这是一个例子:
一个组件有一个按钮，一旦点击，调用:this.store.dispatch(this.clientActions.effectChain(1)); 将由 effectChainReducer 处理，然后ClientEffects.chainEffects$，将负载从 1 增加到 2；等待 500 毫秒发出另一个 Action :this.clientActions.effectChain(2)，在由带有 payload=2 的 effectChainReducer 处理之后，然后是 ClientEffects.chainEffects$，从 2 增加到 3，发出 this.clientActions.effectChain(3)，...，直到它大于 10，ClientEffects.chainEffects$发出 this.clientActions.endEffectChain()，它通过 effectChainReducer 将存储状态更改为 1000，最终在此处停止。
export interface AppState {
... ...
chainLevel: number;
}
// In NgModule decorator
@NgModule({
imports: [...,
StoreModule.provideStore({
... ...
chainLevel: effectChainReducer
}, ...],
...
providers: [... runEffects(ClientEffects) ],
...
})
export class AppModule {}
export class ClientActions {
... ...
static EFFECT_CHAIN = "Chain Effect";
effectChain(idx: number): Action {
return {
type: ClientActions.EFFECT_CHAIN,
payload: idx
};
}
static END_EFFECT_CHAIN = "End Chain Effect";
endEffectChain(): Action {
return {
type: ClientActions.END_EFFECT_CHAIN,
};
}
static RESET_EFFECT_CHAIN = "Reset Chain Effect";
resetEffectChain(idx: number = 0): Action {
return {
type: ClientActions.RESET_EFFECT_CHAIN,
payload: idx
};
}
export class ClientEffects {
... ...
@Effect()
chainEffects$ = this.update$.whenAction(ClientActions.EFFECT_CHAIN)
.map<number>(toPayload)
.map(l => {
console.log(`effect chain are at level: ${l}`)
return l + 1;
})
.delay(500)
.map(l => {
if (l > 10) {
return this.clientActions.endEffectChain();
} else {
return this.clientActions.effectChain(l);
}
});
}
// client-reducer.ts file
export const effectChainReducer = (state: any = 0, {type, payload}) => {
switch (type) {
case ClientActions.EFFECT_CHAIN:
console.log("reducer chain are at level: " + payload);
return payload;
case ClientActions.RESET_EFFECT_CHAIN:
console.log("reset chain level to: " + payload);
return payload;
case ClientActions.END_EFFECT_CHAIN:
return 1000;
default:
return state;
}
}
如果你运行上面的代码，输出应该是这样的:
client-reducer.ts:51 reducer chain are at level: 1
client-effects.ts:72 effect chain are at level: 1
client-reducer.ts:51 reducer chain are at level: 2
client-effects.ts:72 effect chain are at level: 2
client-reducer.ts:51 reducer chain are at level: 3
client-effects.ts:72 effect chain are at level: 3
... ...
client-reducer.ts:51 reducer chain are at level: 10
client-effects.ts:72 effect chain are at level: 10
表示reducer先于effects运行，Effect-Class是post-interceptor，不是pre-interceptor。见流程图:
关于javascript - ngrx/effects 库的用途是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39552067/