Missing properties after setting state

Thank you for this wonderful package.

I am having issues using it in an Angular 10 application using Typescript.

I have setup a store almost identical to the ones provided in the sample application. I have an interface that looks like this:

export interface FileStoreState {
  files: ImportedFile[];
  selectedFiles: SelectionModel<ImportedFile>;
}

I then create a service that extends ObservableStore and give it a type of FileStoreState

@Injectable({
  providedIn: 'root'
})
export class FileService extends ObservableStore<FileStoreState> {
  
  constructor() {
    super({ trackStateHistory: true, logStateChanges: true });
   
    const initialState = {
      files: [],
      selectedFiles: null
    }
    this.setState(initialState, FileStoreActions.Init)
  }

  addFiles(files: Array<ImportedFile>) {
    let state = this.getState();

    files.filter(x => {state.files.push(x)});

    this.setState({ files: state.files}, FileStoreActions.AddFiles)
  }

}

Now my imported File looks like this:

export class ImportedFile {
    electronFileId: string;
    type: string;
    size: string;
    path: string;
    bytes: any;
}

I call the addFiles function in on of my components.

  filesSelected(files: File[]) {    
    let mappedFiles = files
      .filter(x => this.isAcceptedFileType(x))
      .map(x => new ImportedFile(x, FileType.fileSystem));

    **this.fileService.addFiles(mappedFiles);**
  }

When I console log mappedFiles it gives me a result that looks like this:

Which is perfect! It has all of the properties and data I am expecting…

When addFiles is called in the service it should push those files into the files state within the store.

This is where it gets weird… In the console log of the STATE CHANGED it looks as if the files are there with their associated data.

Yet, when I subscribe to state changes the bytes property disappears completely when I subscribe. Also, checking the state afterward shows that the property is no longer there. This is happening with multiple typescript interfaces I am trying to use.

this.storeSub = this.fileService.stateChanged.subscribe(state => {
      if (state) {
        if (state.files.length > 0) {
          console.log(state.files);
          this.files.data = state.files;
        }
      }
    });

The console log now displays this:

Which are the files that I was expecting yet, its missing the bytes property. Also, now when I try and do a this.getState() its also missing from there even though the state change log says it should be there.

None of this makes sense, I’m unsure why this is happening. This is a simple example, it seems to be happening on every single object I am trying to save the state of. For example: SelectionModel ends up losing its functions like toggle and select

Thank you!

[DanWahlin]

Hi Andrew. Glad the library is helping but sorry to see you’re hitting an issue. Thanks for providing the details.

As far as toggle() and select() that you mention, functions can’t be stored. The store only supports JSON objects and functions aren’t something JSON supports.

If you add a console.log() right before setState() in addFiles() I’m assuming you see everything properly in the array that is logged (the bytes property for example)? If bytes is there then the cloning operation that occurs with stateState() should keep it.

console.log(state.files);
this.setState({ files: state.files}, FileStoreActions.AddFiles);

If bytes is there in the log statement above, due to the specific scenario, if you’re able to put together a simple https://stackblitz.io project that duplicates the overall issue that would be great. It’s much easier to help if I’m able to run the code and duplicate the issue.

[DanWahlin]

If you are able to send me one of those JSON objects with the full bytes in it I’ll try to make some time to test to see if JS is just not accepting it, the cloning library is causing it, etc. It’d be nice to at least throw an error if that scenario comes up so that there are no surprises in that case.