NGRX 实体 updateOne 不工作：id undefined

Question

我决定寻求帮助，我就是无法理解 NGRX 实体！（此代码最初由 NX 创建）。

我遵循了 NGRX Entity 指南，我也看了很多教程视频，但我仍然无法让NGRX Entity updateOne工作。在下面收到此错误 - 我可以毫无问题地将实体加载到商店中，并且这些可以很好地构建我的 UI。

我有一个实体按钮集合，并希望在单击时更新按钮的存储状态 - 仅此而已！

（任何想法为什么这不起作用？？）

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,

Answer 1

您错误地调度了您的操作。this.store.dispatch(actions.setQuickFilter(evt));应该this.store.dispatch(actions.setQuickFilter({&nbsp;update:&nbsp;evt&nbsp;}));

Answer 2

耶！！最后。这是一个真正的愚蠢错误——因为不理解实体。大量的反复试验和记录来解决这个问题！解决方案：更改组件中的调度调用：this.store.dispatch(&nbsp;actions.setQuickFilter(&nbsp;{update:&nbsp;evt}&nbsp;}&nbsp;)&nbsp;);到：this.store.dispatch(&nbsp;actions.setQuickFilter(&nbsp;{update:&nbsp;{id:&nbsp;evt.id,&nbsp;changes:&nbsp;evt}&nbsp;}&nbsp;)&nbsp;);现在，我所有订阅的功能都可以使用按钮中的更新值来控制它们自己的 UI 元素。最后！