问题描述
我决定寻求帮助,只是无法理解NGRX Entity! (此代码最初是由NX创建的。)
我已经按照NGRX Entity指南进行操作,也查看了许多教程视频,但是仍然无法使 NGRX Entity updateOne 正常工作。 在下面得到此错误-我可以毫无问题地将实体加载到商店中,并且它们可以很好地构建用户界面。
我有一个按钮的Entity集合,并且想在单击时更新按钮的存储状态-就是这样!
(为什么这不起作用?)
ERROR TypeError: Cannot read property 'id' of undefined
at http://localhost:4200/vendor.js:83815:26
at Array.filter (<anonymous>)
at updateManyMutably (http://localhost:4200/vendor.js:83811:27)
at updateOneMutably (http://localhost:4200/vendor.js:83801:16)
at Object.operation [as updateOne] (http://localhost:4200/vendor.js:83622:27)
at http://localhost:4200/main.js:1169:28
at http://localhost:4200/vendor.js:88532:26
at reducer (http://localhost:4200/main.js:1173:12)
at http://localhost:4200/vendor.js:87072:20
at combination (http://localhost:4200/vendor.js:86960:37)
这是我到目前为止的代码:
// state
export interface QuickButton {
id: number;
isSelected: boolean;
title: string;
linkUrl: string;
}
// in component
this.store.dispatch( actions.setQuickFilter( evt ) );
// evt = {id: 1,isSelected: true,linkUrl: "",title: "Video"}
// in actions
export const setQuickFilter = createAction(
'[QuickBar] setQuickFilter',props<{update: Update<QuickButton>}>()
);
// in reducer
export const QUICKBAR_FEATURE_KEY = 'quickBar';
export interface State extends EntityState<QuickButton> {
selectedId?: string | number; // which QuickBar record selected
loaded: boolean; // has the QuickBar list been loaded
error?: string | null; // last none error (if any)
}
export interface QuickBarPartialState {
readonly [QUICKBAR_FEATURE_KEY]: State;
}
export const quickBaradapter: EntityAdapter<QuickButton> = createEntityAdapter<QuickButton>();
export const initialState = quickBaradapter.getinitialState({
// set initial required properties
loaded: false,});
const quickBarReducer = createReducer(
initialState,on(QuickBaractions.loadQuickBarSuccess,(state,action) =>
quickBaradapter.addAll( action.quickBar,state )
),on(QuickBaractions.loadQuickBarFailure,{ error }) => ({
...state,error,})),on(QuickBaractions.setQuickFilter,{update}) => {
/// **** This is NOT Working *****
return quickBaradapter.updateOne( update,state);
}
)
);
export function reducer(state: State | undefined,action: Action) {
return quickBarReducer(state,action);
}
export const {
selectIds,selectEntities,selectAll,selectTotal,} = quickBaradapter.getSelectors();
解决方法
您错误地调度了您的操作。
this.store.dispatch(actions.setQuickFilter(evt));
应该是
this.store.dispatch(actions.setQuickFilter({ update: evt }));
,
是的!最后。 这是一个真正的愚蠢错误-由于不了解Entity。 许多反复试验和日志记录解决了这个问题!
解决方案: 将组件中的调度调用从以下位置更改:
this.store.dispatch( actions.setQuickFilter( {update: evt} } ) );
收件人:
this.store.dispatch( actions.setQuickFilter( {update: {id: evt.id,changes: evt} } ) );
现在,我所有已订阅的功能都将能够使用按钮中的更新值来控制自己的UI元素。终于!