Блог

Я решил обратиться за помощью, я просто не могу разобраться в сущности NGRX! (Этот код был изначально создан NX ).

Я следовал руководству по сущности NGRX, я также просмотрел множество обучающих видеороликов, но я все еще не могу заставить NGRX Entity updateOne работать. Получаю эту ошибку ниже — я могу без проблем загружать объекты в хранилище, и они отлично создают мой пользовательский интерфейс.

У меня есть набор кнопок объектов, и я хочу обновить состояние сохранения кнопки при нажатии — вот и все!

(есть идеи, почему это не работает ??)

 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, (state, { error }) => ({
    ...state,
    error,
  })),

  on(QuickBarActions.setQuickFilter, (state, {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 }));
  

Ура!! наконец. Это была настоящая глупая ошибка — из-за непонимания сущности. Много проб и ошибок и протоколирования, чтобы решить эту проблему!

Решение: измените вызов отправки в компоненте с:

 this.store.dispatch( actions.setQuickFilter( {update: evt} } ) );
  

Для:

 this.store.dispatch( actions.setQuickFilter( {update: {id: evt.id, changes: evt} } ) );
  

Теперь все мои подписанные функции смогут использовать обновленные значения в кнопках для управления своими собственными элементами пользовательского интерфейса. Наконец-то!