在angular(v5)中如何监听我的应用程序Redux状态对象更改?

时间:2018-02-23 15:02:51

标签: angular redux angular5 angular-redux ng2-redux

我需要知道如何创建一个监听器,例如我想订阅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;
}

2 个答案:

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

我希望此代码可以帮助您