Why old data persists in component and how can I reset it-CodePudding

I fetch data in NGXS state

@State<CollectionsStateModel>({
name: 'collections',
defaults: {
 collectionList: [],
 (...),
 isListLoading: true,
 },
 })


@Selector() static collectionList(state: CollectionsStateModel) { 
 return state.collectionList;
}

@Action(GetCollectionListAction)
    getCollectionList(ctx: any) {
        this.collectionService.getCollections().subscribe((response) => {
            ctx.patchState({
                collectionList: response,
                isListLoading: false,
            });
        });
    }

Then in the component I get the data and manipulate it: sort it and save to component's variable

@Select(CollectionsState.collectionList) collections$!: Observable<IntegratedCollectionExtended[]>; collections: IntegratedCollectionExtended[] | undefined;

    ngOnInit(): void {
        this.store.dispatch(new GetCollectionListAction());

        this.collections$.subscribe((collections) => {
            collections.forEach((collection) => {
                collection.isActive = collection.startDate
                    ? new Date(collection.startDate._seconds * 1000) < this.currentTime
                    : collection.isActive;
            });

            collections.sort((a, b) => {
                if (a.isActive) return -1;
                return 0;
            });

            collections.sort((a, b) => {
                if (new Date(a.startDate._seconds * 1000) < new Date(b.startDate._seconds * 1000)) return -1;
                if (new Date(a.startDate._seconds * 1000) > new Date(b.startDate._seconds * 1000)) return 1;
                return 0;
            });

            collections.forEach((collection) => {
                if (collection.isListed) this.previewCollections.push(collection);
                this.previewCollections = this.previewCollections.slice(0, 3);
                collection.startDate = new Date(collection.startDate._seconds * 1000).toString();
            });
            this.collections = collections;
        });
    }

The data comes with seconds and nanoseconds timestamp so I change it string to display it in the template. Now everything works fine when I navigate to the component for the first time, but other than that it gets messed up. It seems the string saved on starDate persists there.

I consoled.log everywhere and get new data in the state, new data in the beginning of ngOnInit, but then it uses previously saved values. Even when I use this.collections = [] in the beginning of ngOnInit, ngOnDestroy whatever. Can someone help?

CodePudding user response：

Rather than adding to my previous comments....

An aspect of the component code that could be looked at is the mutation of the collections array and collection items. Using sort is changing the store version of the array, same with directly setting collection.startDate

You could use lodash cloneDeep at the beginning of the subscribe to copy the collections object/array, and then use that copy as you please in the component. Might solve the issue, or at least narrowthe problem down