商店订阅未与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

回答

相关问题