商店訂閱未與NGRX店4

叫我在角（4）應用程序，我想與NGRX 4商店訂閱未與NGRX店4

我有一個主模塊

@NgModule({ 
    imports: [ 
     // ... 
     StoreModule.forRoot({}), 
     EffectsModule.forRoot([]) 
    ], 

    declarations: [ 
     AppComponent 
    ], 

    bootstrap: [AppComponent] 
})

和引入減速/狀態管理與

@NgModule({ 
    imports: [ 
     StoreModule.forFeature('lazy', { 
      items: itemsReducer 
     }), 
     EffectsModule.forFeature([ItemEffects]) 
    ], 

    declarations: [ 
     // Components & Directives 
    ] 
})

懶加載模塊，這是我減速

export function itemsReducer(state: Item[] = [], action: ItemAction<any>) { 
    switch (action.type) { 

     case ADD: 
      return [action.payload, ...state]; 

     case DELETE: 
      return state.filter((item) => item.id !== action.payload.id); 

     case ITEMS_LOADED: 
      return Object.assign([], action.payload); 

     case LOAD_ITEMS: 
      return state; 

     default: 
      return state; 
    } 
}

我還面臨着這樣的效果：

@Injectable() 
export class ItemEffects { 

    @Effect() addItem$: Observable<Action> = this.actions$.ofType(ADD) 
     .mergeMap((payload: any) => 
      this.dataService.addItem(payload) 
       // If successful, dispatch success action with result 
       .map((data: any) => { 
        return createLoadItemsAction(); 
       }) 
       // If request fails, dispatch failed action 
       .catch(() => of({ type: 'FAILED' })) 
     ); 

    @Effect() loadItems$: Observable<Action> = this.actions$.ofType(LOAD_ITEMS) 
     .mergeMap(() => 
      this.dataService.getAllItems() 
       // If successful, dispatch success action with result 
       .map((data: Item[]) => (createItemsLoadedAction(data))) 
       // If request fails, dispatch failed action 
       .catch(() => of({ type: 'FAILED' })) 
     ); 

    constructor(
     private dataService: DataService, 
     private actions$: Actions 
    ) { } 
}

，在我的狀態組件，我訂閱了這個店這樣

export class MainItemsComponent implements OnInit { 
    items: Observable<Items[]>; 

    constructor(private store: Store<any>) { 
     this.items = this.store.select('items'); 
    } 

    ngOnInit() { 
     this.store.dispatch(createLoadItemsAction()); 
    } 

    // ... 

}

隨着console.logs我可以看到，影響工作，reducer被調用了正確的操作「ITEMS_LOADED」，所有的項都在裏面，但是它們沒有被傳遞給我的有狀態組件並且不顯示。

我的行爲看起來像這樣

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

export interface ItemAction<T> extends Action { 
    payload?: T; 
} 

/* 
* action types 
*/ 

export const ADD = 'ADD' 
export const DELETE = 'DELETE' 
export const LOAD_ITEMS = 'LOAD_ITEMS' 
export const ITEMS_LOADED = 'ITEMS_LOADED' 

/* 
* action creators 
*/ 

export function createAddItemAction(item: Item): ItemAction<Item> { 
    return { type: ADD, payload: item } 
} 

export function createDeleteItemAction(item: Item): ItemAction<Item> { 
    return { type: DELETE, payload: item } 
} 

export function createItemsLoadedAction(items: Item[]): ItemAction<Item[]> { 
    return { type: ITEMS_LOADED, payload: items } 
} 

export function createLoadItemsAction(): ItemAction<Item> { 
    return { type: LOAD_ITEMS } 
}

我使用

"@ngrx/effects": "^4.0.5", 
"@ngrx/store": "^4.0.3",

我缺少什麼？我的目標是在組件加載時加載項目。

來源

2017-08-27 Tenoda

用'ItemAction'類文件更新帖子 – Aravind

你如何測試'this.items = this.store.select（'items'）'不工作的事實？如果你可以顯示你的模板，因爲錯誤可能在 – Meeker

很難看到這樣的問題，如果你可以複製一個小笨蛋，會更好。有關ngrx的更多信息，請查看[link]（https://rahulrsingh09.github.io/AngularConcepts/ngrx） –

Uhm。如果我理解正確，選擇另一種方式。

你現在期待什麼？ this.store.select('items')這應該如何工作？

據我所知你需要創建選擇器。我不確定你是否創建了它們，因爲我在你提供的代碼中看不到它們中的任何一個。而且你還以奇怪的方式使用select。

我想，你錯過了那個選擇器。你需要這個：here

或者你也可以請說明您認爲與當前的代碼是什麼：使用選擇的here

例如：

創造選擇的例子嗎？ :)也許我不知道什麼。

來源

2017-08-27 21:54:33

嘗試定義屆時AppState接口和類型商店的狀態：

interface AppState{ 
    items: Item[] 
} 

constructor(private store: Store<AppState>)

然後別忘了在模板文件異步管（項目|異步），或在組件文件訂閱（但我想你知道）

來源

2017-08-28 04:11:26

商店訂閱未與NGRX店4

回答

相關問題