在angular(v5)中，如何收听我的应用程序Redux状态对象的更改? [英] In angular (v5) how do I listen to my apps Redux state object changing?

问题描述

我需要知道如何创建监听器，例如我想订阅AppState的更改.

I need to know how to create a listener e.g. I want to subscribe to the AppState changing.

以下是我目前最基本的服务. 我在视图上执行了一个调度操作，该操作会增加计数器.

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 e.g. the global header for example.

我正在使用Ang2-版本5的ng2-Redux.

I'm using ng2-Redux with angular version 5.

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;
}

推荐答案

我在文件中声明操作

// 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") })
}

Reducer将修改商店的当前状态

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
    }
}

在我的模块声明中，您应该同时声明效果和reducer动作

In my module declaration you should declare both effects and reducer actions

const EffectModules = [
    EffectsModule.run(RoleEffects)
....
....
]

在模块的导入中，我将声明所有的reducer和效果

in the imports of my module I will declare all the reducer and effects

@NgModule({
    imports: [
StoreModule.provideStore({roles: RoleReducer,
... // all the other reducers
}),
...EffectModules,
]
})

我希望这段代码对您有帮助

I hope this code will help you

这篇关于在angular(v5)中，如何收听我的应用程序Redux状态对象的更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！