angularngxsredux-devtools

How to slice parts of an array if the array has to many elements in NGXS Devtools?


I have an array in my state with around 1500 elements. I realized that the Angular application is lagging if I dont disable the NGXS Devtools because of the large array. Now I want to either dont show the array or just show a part of it with slice. I read about actionSanitizer and stateSanitizer. I wanted to use the actionSanitizer but I cannot access the array because I get the array from an API. So my next thought was to use the stateSanitizer and just reassign parts of the array with slice but that is not possible since the state is readonly:

Cannot assign to read only property 'array' of object '[object Object]'

What could I do now?

NgxsReduxDevtoolsPluginModule.forRoot({
  disabled: false,
  // how to either omit or slice array?
  stateSanitizer: (state) => {

  },
  actionSanitizer: (action) => {

  }
})

Solution

  • storing large data collections in the state is discouraged because of the issues you mentioned. try to implement pagination to retrieve slices of data and store it in the global state.