NGRX Найти список объектов из одного объекта и обновить его - PullRequest
Новая
       10

NGRX Найти список объектов из одного объекта и обновить его

1 голос
/ 21 октября 2019

У меня есть список объектов в моем ngrx/store, когда пользователь нажимает на кнопку, я хочу найти этот объект, используя идентификатор объекта, и обновлять его соответствующие свойства с помощью ngxr/entities. Как-то мне удается это сделать, но я знаю,Это не правильный путь. Это моя текущая реализация. 

const initialState: TourListState = {
    tours: null,
    isLoading: false,
    error: null
}

const tourListReducer = createReducer(initialState,
    ...,
    ...,
    ...,
    ...,
    on(createTourListSucess, (state) => {
        return { ...state, isLoading: false }
    }),
    on(updateTourList, (state, { tour }) => {
      state.tours.find(tourex => tourex.tourId === tour.tourId).coverImage = tour.coverImage;
      state.tours.find(tourex => tourex.tourId === tour.tourId).title = tour.title;
      state.tours.find(tourex => tourex.tourId === tour.tourId).priceInfo = tour.priceInfo;
      state.tours.find(tourex => tourex.tourId === tour.tourId).city = tour.city;
      state.tours.find(tourex => tourex.tourId === tour.tourId).countryName = tour.countryName;
      return { ...state, isLoading: false }
    }),
    on(updateTourListSuccess, (state) => {
        return { ...state, isLoading: false }
    }),
    ....,
)

export function reducer(state: TourListState | undefined, action: Action) {
    return tourListReducer(state, action)
}

1 Ответ

2 голосов
/ 21 октября 2019

Вы непосредственно изменяете состояние, что не рекомендуется - даже если вы клонируете его впоследствии.

Вы можете использовать оператор карты в вашем случае: 

return {
   ...state,
   tours: state.tours.map(t => t.tourId === tourId ? (updateTour) : t) 
}

Вышеприведенные фрагментыциклически просматривает коллекцию туров, если он находит, что тур обновляется, он обновляет его, в противном случае он просто возвращает тур как есть.

Другим решением будет использование mutableOn(который использует Immer внизу). 

mutableOn(update, (state, { tour }) => {
    const entity = state.tours.find(t => t.tourId === tourId)
    if (entity) {
      entity.foo = tour.foo
      entity.bar = tour.bar
    }
  }),
...