在 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.

我正在使用 ng2-Redux 和 angular 版本 5.

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 会修改 store 的当前状态

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

在我的模块声明中，你应该同时声明 effect 和 reducer 动作

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

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

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

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,
]
})

希望这段代码能帮到你

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