商店订阅未与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",
我缺少什么?我的目标是在组件加载时加载项目。
答
尝试定义届时AppState接口和类型商店的状态:
interface AppState{
items: Item[]
}
constructor(private store: Store<AppState>)
然后别忘了在模板文件异步管(项目|异步),或在组件文件订阅(但我想你知道)
用'ItemAction'类文件更新帖子 – Aravind
你如何测试'this.items = this.store.select('items')'不工作的事实?如果你可以显示你的模板,因为错误可能在 – Meeker
很难看到这样的问题,如果你可以复制一个小笨蛋,会更好。有关ngrx的更多信息,请查看[link](https://rahulrsingh09.github.io/AngularConcepts/ngrx) –