ngrx

Question

如标题所述，我遇到了一个问题，即我的所有效果仅在这些情况下才能正常工作：

我已经登录
我没有登录

如果我设法注销并用另一个用户登录，就会出现问题。只有每个 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 问题和相关问题，例如但我真的无法解决这个问题。

I'm guessing it may be caused by the fact that I have these two different modules

编辑:

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

我做错了什么？

Answer 1

发现问题是由 ngrx 的旧版本引起的。我设法按照 migration guide 和自述文件中的不同说明将所有内容升级到版本 4.1.1。

ngrx - 奇怪的效果行为

ngrx - Weird Behavior on Effects

typescript

ngrx-effects

angular

ngrx-store