2017-10-10 18 views
0

ngrx 4.0.3とangular-cli 1.1.2の角度4.4.3プロジェクトがあります。私はAOTオプションを使用していないとき--aot = trueを使用している場合、レジューサーが呼び出されていません。

すべてがOKですが、私は=真--aot使用していたとき、私は(私は「REDUCER解雇」コンソール出力を見ることができないので)リデューサーが呼び出されていないことがわかります。

アクション:

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:何かが私は忘れてしまった場合は

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

はありますか?

おかげで良いngrx peolpe

答えて

1

はようやく--aot私のコードの実行ウィットを作る方法を考え出し:

トリックをした

  1. /インデックス減速にinjectionTokenを定義します:

    export const reducerToken = new InjectionToken<ActionReducerMap<AppState>>('Registered Reducers');   
    Object.assign(reducerToken, reducers); 
    
  2. はgetReducers工場(app.module)を定義:

    export function getReducers() { 
        return reducers; 
    } 
    
  3. app.moduleにモジュールを登録: reducerTokenを登録しprovders部でそれを提供する:

    imports:[ 
        ... 
        ... 
        StoreModule.forRoot(reducerToken), 
        EffectsModule.forRoot([PostEffects]) 
    ], 
    providers: [ 
    { 
        provide: reducerToken, 
        useFactory: getReducers 
    } 
    
関連する問題