persistState() function not working for me

[st-clair-clarke]

I have the following:

import { Injectable } from '@angular/core'
import { createState, select, Store, withProps } from '@ngneat/elf'
import { localStorageStrategy, persistState } from '@ngneat/elf-persist-state'
import { IRegistration, Registration } from '@pim/common/registration/util'
import { ID } from '@pim/common/shared/util'
import { nanoid } from 'nanoid'

import { immerable } from 'immer'


interface IRegistrationUi {
	id: ID
}

class RegistrationUi {
	[immerable] = true
	id: ID = nanoid()
}

interface IRegistrationState {
	id: ID

	domain: IRegistration
	ui: IRegistrationUi
}

class RegistrationState {
	id = nanoid()

	domain: IRegistration = new Registration()
	ui: IRegistrationUi = new RegistrationUi()
}

const { state, config } = createState(
	withProps<IRegistrationState>(new RegistrationState()),
)
const store = new Store({ name: 'pimRegistration', state, config })
const persist = persistState(store, {
	key: 'pimRegistration',
	storage: localStorageStrategy,
})

The repository updates and I can retrieved my states. However, when I input data in the UI and peform a page refresh, the UI data is NOT updated, although the data is still in the repo. What am I doing incorrectly?

[hakimio]

Is the data saved in local storage? How are you updating the data in store? If you listen for the source changes, do you get anything:

persistState(store, {
  key: 'pimRegistration',
  storage: localStorageStrategy,
  source: () => store.pipe(
    tap(state => console.log('state changed', state))
  ),
});

Can you reproduce the issue on stackblitz?

[st-clair-clarke]

The data is stored in local storage. Listening for the source changes logs the expected change.

Using either method below updates the store and logs the changes correctly:

##1

    this._repo.store.update(
    	write((state) => {
    		state.domain.referrer.company = this.company
    	}),
    )

##2

this._repo.updateReferrer('company', this.company)

	updateReferrer(property: string, value: any) {
		store.update((state) => ({
			...state,
			domain: {
				...state.domain,
				referrer: {
					...state.domain.referrer,
					[property]: value,
				},
			},
		}))
	}

	ngOnInit(): void {
                // retrieves the company at initialization but UI is not updated
		this._repo.company$.subscribe(
			(company: ICompany) => (this.company = { ...this.company, ...company }),
		)
	}

[hakimio]

Maybe it's not an issue with elf, but with the way you update your UI? Can you check the store state after reloading the page? Is it correct? You can use Redux DevTools extension with elf devtools for that.

[st-clair-clarke]

After reloading, the data is still in the state as shown below.

I do use Devtools.

I will check how the UI is updated.