ngrx - 对效果的奇怪行为

时间:2017-10-17 08:21:22

标签: angular typescript ngrx ngrx-store ngrx-effects

正如标题所述,我面临的问题是,只有在这些情况下,我的所有效果才能正常运作:

  • 我已登录
  • 我没有登录

如果我设法退出并与其他用户登录,则会出现问题。只调用执行操作调度的每个ngOnInit。没有效果被解雇。

我有两个模块, app.module pages.module 。第一个只声明未登录用户的组件,例如login / register / reset。第二个仅声明登录用户的组件。

app.module.ts 中,我导入所有缩减器并将其设置为StoreModule.provideStore(reducer)。在 pages.module.ts ,另一个模块中,我导入并激活EffectsModule.run(TestEffects)等效果。

使用以下代码仅调用ngOnInit内的日志。效果中的日志永远不会被调用。

test.component.ts

/** ngrx **/
import * as reducers from '../../reducers';
import * as testActions from './actions/test.actions';

. . .

constructor(private _store: Store<reducers.State>){
    this._store.select(reducers.getStuff)
        .subscribe(stuff => console.log(stuff));
}

ngOnInit() {
    console.log('Dispatching Load Action');
    this._store.dispatch(new testActions.LoadAction());
}

test.actions.ts

import { Action } from '@ngrx/store';

export const ActionTypes = {
    LOAD: type('[Test] Load'),
    LOAD_SUCCESS: type('[Test] Load Success'),
};

export class LoadAction implements Action {
    type = ActionTypes.LOAD;
    constructor() {}
}

export class LoadActionSuccess implements Action {
    type = ActionTypes.LOAD_SUCCESS;
    constructor(public payload: SomeType) {}
}

export type Actions
  = LoadAction
  | LoadActionSuccess

test.effects.ts

@Injectable()
export class TestEffects {
  @Effect() load$ = this.actions$
    .ofType(testActions.ActionTypes.LOAD)
    .map(toPayload)
    .switchMap(() => this._testService.getStuff()
      .map(result => new testActions.LoadActionSuccess(result))
      .catch((error) => Observable.of({type: error}))
    )
  ;

  constructor(private _testService: TestService, private actions$: Actions) {}
}

test.reducer.ts

import { createSelector } from 'reselect';
import { Action } from '@ngrx/store';
/** ngrx **/
import * as sidebarActions from '../actions/test.actions';

export interface State {
    stuff: SomeType
};

export const initialState: State = {
    stuff: new SomeType()
};

export function testReducer(state = initialState, action: Action): State {
    switch (action.type) {
        case testActions.ActionTypes.LOAD_SUCCESS:
            return {
                stuff: new SomeType(action.payload)
            }
        default: {
            return state;
        }
    }
}

export const getStuff = (state: State) => state.stuff;

在我的 package.json 中,我有:

{
    "dependencies" : {
        "@angular/core": "^4.0.0",
        . . .,
        "@ngrx/core": "^1.2.0",
        "@ngrx/effects": "^2.0.4",
        "@ngrx/store": "^2.2.3",
        . . .
    },
    "devDependencies" : {
        . . .
        "ngrx-store-freeze": "^0.1.9",
        . . .
    }
}

我真的不明白这种行为。我还对ngrx github问题以及this one等相关问题进行了掠夺,但我真的无法解决这个问题。

  

我猜这可能是因为我有这两个   不同的模块

修改

app.module 中移动效果及其服务会导致相同的行为。

我做错了什么?

1 个答案:

答案 0 :(得分:0)

问题是由旧版 ngrx 引起的。我设法将所有内容升级到migration guide之后的版本 4.1.1 以及自述文件中的不同说明。