[英]NGRX | store.select(state => state.MyObject) | returns undefined
[英]ngRx Store - Reducer returns undefined - store.select() is undefined
這是我第一次使用 ngRx Store,我實現了我的第一個效果..
什么工作正常:
所以我的問題是我無法從減速器中獲取數據。 如果我 select 將數據從存儲在我的組件中,我會在組件中獲得未定義的數據。 我點擊了效果中的數據,數據被明確傳遞了。 還將數據記錄在減速器中 - 它就在那里。 但是當它返回時,它返回未定義。 ReDux Devtools 記錄一切正常。 最后但並非最不重要的一點.. state 沒有更新,即使是固定值,如 boolean 與 true/false 用於加載。
樂代碼:
// 我得到未定義的地方
export class ProfileComponent implements OnInit {
user: any;
items$: Observable<Product[]>;
loading$: Observable<boolean>;
error$: Observable<Error>;
newItem: Product = {id: 0, name:""};
constructor(private keycloakService: KeycloakService, private store: Store<ProductState>, private productService: ProductService) { }
ngOnInit(): void {
this.productService.setToken(this.keycloakService.getToken());
this.user = this.keycloakService.getUsername();
this.items$ = this.store.select(store => store.list);
this.loading$ = this.store.select( store => store.loading);
this.error$ = this.store.select( store => store.error);
this.store.dispatch(new LoadProduct());
this.items$.subscribe(val => console.log(val));
this.loading$.subscribe(val => console.log(val));
this.error$.subscribe(val => console.log(val));
}
// 減速器
export type Action = Products.All;
const initialState: ProductState = {
list: [],
loading: false,
error: undefined
}
const newState = (state, newData) => {
return Object.assign({}, state, newData);
}
export function reducer(state: ProductState = initialState, action: Action) : ProductState{
console.log(action.type, state);
switch (action.type) {
case Products.LOAD_PRODUCT: return { ...state, loading: true};
case Products.LOAD_PRODUCT_SUCCESS: return newState(state, {list: action.payload, loading: false, error: undefined});
case Products.LOAD_PRODUCT_FAILURE: return { ...state, error: action.payload, loading: false};
case Products.ADD_PRODUCT: return { ...state, loading: true};
case Products.ADD_PRODUCT_SUCCESS: return { ...state, list: action.payload, loading: false};
case Products.ADD_PRODUCT_FAILURE: return { ...state, error: action.payload, loading: false};
case Products.REMOVE_PRODUCT: return { ...state, loading: true};
case Products.REMOVE_PRODUCT_SUCCESS: return { ...state, list: state.list.filter(item => item.id !== action.payload), loading: false};
case Products.REMOVE_PRODUCT_FAILURE: return { ...state, error: action.payload, loading: false};
default: return state;
}
我非常感謝您的幫助:)
您應該使用選擇器函數從商店獲取數據: https://ngrx.io/guide/store/selectors
為了快速解除阻塞,我敢打賭 state 上未定義.list, .loading, .error
state
試試這個來調試:
// see how the whole store looks like
this.store.subscribe(state => console.log({ state }));
對你來說,我認為它與products
相關,所以我敢打賭它應該是這樣的:
this.items$ = this.store.select(store => store.products.list);
this.loading$ = this.store.select( store => store.products.loading);
this.error$ = this.store.select( store => store.products.error);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.