如何在Angular 5中使用ngrx状态更新数组中的一个或多个对象属性？

Question

I have an array of elements which I am storing in a state, the array would have look something like this:

filterList: Array<any> = [
    {name: "Branch", filters: [{value: "Location 1", status: "unselected"}, {value: "Location 2", status: "selected"}]},
    {name: "Segment", filters: [{value: "Segment 1", status: "selected"}, {value: "Segment 2", status: "selected"}]},
     ...... and so on
]

The array is a huge list, where I would like to add an object to the filters array or change the status property from unselected to selected or even add more objects to the filterList .

How do I set the state, to only change the things I needed and not the entire array? As of now, I have been trying few things, but couldn't work them out. Here is the one I tried.

case FilterActions.FILTER_LIST:
   return {
      ...state,
      filterList: [...state, action.payload]
   };

And also how do I dispatch the actions to update only a few elements at a time? I have been trying to do it like this.

this.store.dispatch(new MainActions.FilterListActions([{name: "Branch"}, filters: [{value: "Location 1", status: "selected"}]]));

Please help me out this.

Update

Here's the code for store.actions.ts

import {Action} from '@ngrx/store';

export const FILTER_LIST = 'FILTER_LIST';

export class FilterListAction implements Action {
  readonly type = FILTER_LIST;
  constructor (public payload: Array<any>) {}
}

export type FilterActions = FilterListAction;

Here's the code for the store.reducer.ts file:

import * as FilterActions from './store.actions';

const initialState = {
  filterList: []
};

export function filtersReducer(state = initialState, action: FilterActions.FilterActions) {
  switch (action.type) {
     case FilterActions.FILTER_LIST:
        return {
          ...state,
          filterList: [...state, action.payload]
        };
     default: return state;
  }
}

Answer 1

I belive you can use simple js/ts function 'find' to get this done.

let filterList: Array<any> = [
    {name: "Branch", filters: [{value: "Location 1", status: "unselected"}, {value: "Location 2", status: "selected"}]},
    {name: "Segment", filters: [{value: "Segment 1", status: "selected"}, {value: "Segment 2", status: "selected"}]},
     ...... and so on
]

consider the case where you need to added object

  let toBeAddedFilter = {value: "Location 1", status: "unselected"}

to filters where name= "Branch" .

Then you use filter() like

filterList.find(x=>x.name=="Branch").filters.push(toBeAddedFilter);

also to change status of one specific location of a specific branch

filterList.find(x=>x.name=="Branch")
    .filters.find(y=>y.value="Location 1").status ='selected';

I belive you can make a function for each need out of this example. This does not change the complete array.

To complete Pass the value of the filtercategory name using a function to your custom array update function if the filter category change. if it is something inside filters of one filter category pass that too. the functions can be like okThisChanged(filtercategory,value,newStatus) for edit and okThisFilterAdded(filtercategory,newlyAddedFilter) for add