使用--aot = true时未调用reducers [英] reducers is not being called when using --aot=true

问题描述

我有一个带有ngrx 4.0.3和angular-cli 1.1.2的angular 4.4.3项目.

I have angular 4.4.3 project with ngrx 4.0.3 and angular-cli 1.1.2.

当我不使用 aot 选项时，一切正常，但是当我使用--aot = true时，我可以看到未调用reducers(因为我看不到控制台输出'REDUCER点火"):

Everything is OK when i'm not using aot option, but when i'm using --aot=true I can see that reducers not being called (because I cannot see console output 'REDUCER FIRED'):

动作:

import { Post } from '../models';
import {Action as NgRxAction} from '@ngrx/store';
export interface Action extends NgRxAction {
    payload?: any;
}
@Injectable()
export class PostActions {
    static LOAD_POSTS = '[Post] Load Posts';
    loadPosts(): Action {
        return {
            type: PostActions.LOAD_POSTS
        };
    }
    ...
    ...
}

效果:

import { AppState } from '../reducers';
import { PostActions, Action } from '../actions';
import { LoadHtmlServiceService } from '../services/load-html-service.service';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class PostEffects {
    constructor(
        private update$: Actions,
        private postActions: PostActions,
        private svc: LoadHtmlServiceService
    ) { }

    @Effect() loadPosts$ = this.update$
        .ofType(PostActions.LOAD_POSTS)
        .switchMap(() => this.svc.getAllSections())
        .map(posts => this.postActions.loadPostsSuccess(posts));
    ...
    ... 
}

减速器/后列表:

import { PostActions, Action } from '../actions';
export type PostListState = Post[];
const initialState: PostListState = [];

export default function (state = initialState, action: Action): PostListState {
    console.log('REDUCER FIRED!!!!')
    switch (action.type) {        
        case PostActions.LOAD_POST_SUCCESS: {
            return action.payload;
        }
       ...
       ...
    }
}

减速器/索引:

import postListReducer, * as fromPostList from './post-list';
import postReducer, * as fromPost from './post';
import userReducer, * as fromUser from './user';

export interface AppState {
    posts: fromPostList.PostListState;
    post: fromPost.PostState;
    user: fromUser.UserState;
};


export const reducers: ActionReducerMap<AppState> = {
   posts: postListReducer,
   post: postReducer,
   user: userReducer
};

app.module:

app.module:

 import { reducers } from './reducers';
 import { PostEffects } from './effects';
 @NgModule({
  declarations: [
   AppComponent
 ],
  entryComponents: [AddSectionModalComponent],
  imports: [
    LayoutModule
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([PostEffects])
  ]
...
...

我在哪里忘记了什么?

感谢优秀的ngrx peolpe

Thanks good ngrx peolpe

推荐答案

最终弄清楚了如何使我的代码与--aot一起运行:

finally figured out how to make my code run wit --aot:

诀窍是:

1. 在减速器/索引上定义injectionToken:

1. defining injectionToken on reducers/index:

export const reducerToken = new InjectionToken<ActionReducerMap<AppState>>('Registered Reducers');         
Object.assign(reducerToken, reducers);

定义getReducers工厂( app.module ):

export function getReducers() {
  return reducers;
}

在 app.module 上注册模块时: 注册reducerToken并在provders部分中提供它:

when registering modules on app.module: register reducerToken and provide it in provders section:

imports:[   
   ...
   ...
   StoreModule.forRoot(reducerToken),
   EffectsModule.forRoot([PostEffects])
],
 providers: [
{
   provide: reducerToken,
   useFactory: getReducers
}

这篇关于使用--aot = true时未调用reducers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！