未使用ngrx存储区4调用存储区订阅
在我的angular ( 4 )应用程序中，我想使用ngrx 4引入一个reducer/状态管理。
我有一个主模块
@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，我可以看到效果正在工作，使用正确的操作"ITEMS_LOADED“调用了reducer，所有的项都在里面，但它们没有传递到我的有状态组件，也没有显示出来。
我的行为如下所示
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",我遗漏了什么？我的目标是在加载组件时加载项。
回答 3
Stack Overflow用户
发布于 2017-08-28 05:54:33
嗯。如果我理解正确的话，选择另一种工作方式。
你现在还能期待什么？this.store.select('items')这应该如何工作？
据我所知，你需要创建选择器。我不确定它们是您创建的，因为我在您提供的代码中看不到它们中的任何一个。此外，您还以一种奇怪的方式使用select。
我认为，您错过了选择器。你需要这样做：
使用选择器：here的
- 创建选择器的示例
或者您能解释一下您对当前代码的期望吗？:)也许我不知道什么。
Stack Overflow用户
发布于 2019-01-04 15:51:56
要获取数据，您需要使用选择器并添加一个州，正如上面的A.Moynet所提到的
https://ngrx.io/guide/store/selectors
ngrx guys的示例如下
import { createSelector } from '@ngrx/store';
export interface FeatureState {
counter: number;
}
export interface AppState {
feature: FeatureState;
}
export const selectFeature = (state: AppState) => state.feature;
export const selectFeatureCount = createSelector(
selectFeature,
(state: FeatureState) => state.counter
);为了使用这一点，我们在组件中这样做
ngOnInit() {
this.counter = this.store.pipe(select(fromRoot.selectFeatureCount))
}Stack Overflow用户
发布于 2017-08-28 12:11:27
尝试定义AppState接口并键入存储区的状态：
interface AppState{
items: Item[]
}
constructor(private store: Store<AppState>)然后，不要忘记在模板文件中异步管道(items | async)或在组件文件中订阅(但我想你知道这一点)
https://stackoverflow.com/questions/45903835
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号