我需要知道如何创建一个监听器,例如我想订阅AppState更改。
以下是我目前非常基本的服务。 我在视图上有一个调度操作,它会使计数器递增。
一旦计数器改变了值,我想在我的网站的其他部分检测到这一点,例如例如全局标题。
我正在使用带有角度版本5的ng2-Redux。
Redux服务:
export interface IAppState {
counter: number;
}
export const INITIAL_APP_STATE: IAppState = {
counter: 0
};
export function appReducer(state: IAppState, action: any): IAppState {
switch (action.type) {
case 'INCREMENT':
return {
counter: state.counter + action.payload
};
}
return state;
}
答案 0 :(得分:0)
angular-redux提供了一种使用@select()
装饰器选择商店切片的非常方便的方法。
假设您的IAppState
将是:
export interface IAppState {
counter: number;
auth: {token: string};
}
然后你可以选择你所在州的部分:
// variable name is equal to state property + $
@select() counter$: Observable<number>;
@select() auth$: Observable<{token: string}>;
// path to store slice
@select(['auth', 'token']) token$: Observable<string>;
有关详细信息,请查看select docs。
答案 1 :(得分:0)
我在文件
中声明了这些操作// action.ts
export const FILTER_ROLES = "FILTER_ROLES"
// this action will be handled in the effect
export class FilterRoles implements Action {
readonly type = FILTER_ROLES
constructor(public query: any) { }
}
export const FILTERED_ROLES = "FILTERED_ROLES"
// this one will modify the reducer
export class FilteredRoles implements Action {
readonly type = FILTERED_ROLES
constructor(public values: Array<any>, public total: number) { }
}
效果文件将如下所示(效果将调用后端)
@Injectable()
export class RoleEffects {
@Effect() filter_roles = this.actions$
.ofType(FILTER_ROLES)
.flatMap((action: FilterRoles) => {
return
backendCall()
.mergeMap(({ values, total }) => {
return [
new FilteredRoles(values, total)
]
}).catch((err: Error) => { console.log("sss") })
}
reducer将修改商店的当前状态
export function RoleReducer(state: Roles = { values: [], total: 0 }, action: RoleActions) {
switch (action.type) {
case FILTERED_ROLES:
return Object.assign({}, state, { values: action.values, total: action.total })
default:
return state
}
}
在我的模块声明中,您应该声明效果和缩减器操作
const EffectModules = [
EffectsModule.run(RoleEffects)
....
....
]
在我的模块的导入中,我将声明所有的reducer和效果
@NgModule({
imports: [
StoreModule.provideStore({roles: RoleReducer,
... // all the other reducers
}),
...EffectModules,
]
})
我希望此代码可以帮助您