Shop subscribe nicht mit NGRX Speicher 4

Question

In meinem Winkel (4) app Ich möchte einzuführen, um eine Reduzierung/Statusverwaltung mit NGRX 4.

genannt Ich habe ein Hauptmodul

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

    declarations: [ 
     AppComponent 
    ], 

    bootstrap: [AppComponent] 
}) 

und ein faul geladenen Moduls mit

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

    declarations: [ 
     // Components & Directives 
    ] 
}) 

das ist mein Minderer

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; 
    } 
} 

ich auch mit Effekten wie dies zu tun bin:

@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 
    ) { } 
} 

und in meiner Stateful Komponente zu diesem Speicher wie diese sehen kann ich

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

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

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

    // ... 

} 

Mit console.logs Ich melde, dass die Effekte arbeiten , der Reducer wird mit den richtigen Aktionen "ITEMS_LOADED" aufgerufen, alle Elemente befinden sich im Inneren, aber sie werden nicht an meine Stateful-Komponente übergeben und nicht angezeigt.

Aussehen Meine Aktionen wie diese

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 } 
} 

I

bin mit

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

Was bin ich? Mein Ziel ist es, die Elemente zu laden, wenn die Komponente geladen wird.

Answer 1

Uhm. Wenn ich das richtig verstehe, funktioniert das anders.

Was erwarten Sie jetzt? Wie funktioniert das? this.store.select('items')?

Wie ich verstehe, müssen Sie Selektoren erstellen. Ich bin mir nicht sicher, ob Sie sie erstellt haben, da ich sie in dem von Ihnen bereitgestellten Code nicht sehen kann. Und auch Sie verwenden select auf eine seltsame Art und Weise.

Ich denke, dass Sie diese Selektoren fehlen. Sie müssen dies:

• Beispiel Selektor erstellen: here
• Beispiel für die Verwendung Selektor: here

Oder können Sie mir bitte erklären, was Sie mit Ihrem aktuellen Code zu erwarten? :) Vielleicht weiß ich etwas nicht.

Answer 2

Versuchen Sie, die AppState Schnittstelle definieren und den Zustand des Speichertyp:

interface AppState{ 
    items: Item[] 
} 

constructor(private store: Store<AppState>) 

Dann vergessen Sie nicht über die Pipeline in der Template-Datei auf ASYNC (Artikel | async) oder in der Komponentendatei abonnieren (But Ich denke, Sie wissen das)