1

我需要知道如何创建一个监听器，例如我想订阅 AppState 的变化。

以下是我目前非常基本的服务。我在视图上有一个调度操作，它增加了计数器。

一旦计数器改变值，我想在我网站的其他部分检测到这一点，例如全局标题。

我正在使用带有角度版本 5 的 ng2-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;
}
4

2 回答 2

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

减速器将修改您商店的当前状态

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)
....
....
]

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

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

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

于 2018-02-26T01:13:33.603 回答
0

@select()angular-redux 提供了一种使用装饰器 选择商店切片的非常方便的方法。

假设您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>;

有关更多信息，请查看选择文档。

于 2018-02-25T22:17:51.583 回答