[英]In angular (v5) how do I listen to my apps Redux state object changing?
I need to know how to create a listener eg I want to subscribe to the AppState changing. 我需要知道如何创建一个侦听器,例如,我想订阅AppState的更改。
Below is my current very basic service. 以下是我目前非常基本的服务。 I have a dispatch action on the view which increments the counter.
我在增加计数器的视图上执行分派操作。
Once the counter changes value I'd like to detect this in other parts of my website eg the global header for example. 计数器更改值后,我想在网站的其他部分(例如,全局标头)中检测到该值。
I'm using ng2-Redux with angular version 5. 我正在使用Ang2-版本5的ng2-Redux。
Redux service: 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;
}
angular-redux offers a very convenient way of selecting slices of your store with the @select()
decorator. angular-redux提供了一种非常方便的方法,可以使用
@select()
装饰器选择商店的切片。
Let's say your IAppState
would be: 假设您的
IAppState
为:
export interface IAppState {
counter: number;
auth: {token: string};
}
Then you can select the parts of your state like this: 然后您可以选择状态的一部分,如下所示:
// 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>;
For further information, have a look at the select docs . 有关更多信息,请参阅select docs 。
I declare the actions in a file 我在文件中声明动作
// 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) { }
}
the effects file will look like this, (effects will call the backend) 效果文件如下所示(效果将调用后端)
@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") })
}
the reducer will modify the current state of your store 减速器将修改商店的当前状态
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
}
}
In my module declaration you should declare both effects and reducer actions 在我的模块声明中,您应该同时声明效果和reducer操作
const EffectModules = [
EffectsModule.run(RoleEffects)
....
....
]
in the imports of my module I will declare all the reducer and effects 在模块的导入中,我将声明所有的reducer和effect
@NgModule({
imports: [
StoreModule.provideStore({roles: RoleReducer,
... // all the other reducers
}),
...EffectModules,
]
})
I hope this code will help you 希望这段代码对您有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.