Ngrx/entity and metaReducers with localStorageSync

[csaszika]

Hi Everyone,

I just would like to ask that it is possible to use ngrx/entity with localStorageSync?

My experience is that everything is working with normal states but with entity states no.

This is an example how I would like to register my entity state into local storage.

export function userPreferencesLocalStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({
    keys: [USER_PREFERENCES_STORE_KEY],
    rehydrate: true,
  })(reducer);
}

@NgModule({
  imports: [StoreModule.forFeature(USER_PREFERENCES_STORE_KEY, reducer, { initialState, metaReducers })],
})
export class UserPreferencesStoreModule {}

Thanks for any advice

[timdeschryver]

Are you sure this is a ngrx/entity problem, if so, what makes you think this?
A bit more info then a simple "no" could point us in the right direction (is it throwing exceptions, does the state not get saved, or hydrated) ?

I'm not using the ngrx-local-storage library myself but it seems like it has problems with feature states?
https://github.com/btroncone/ngrx-store-localstorage/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+feature+module

[csaszika]

Some more information:

1. I get no errors.
2. with redux devtools I see my feature state and I can update it with actions
3. everything is working except the local storage integration

my initializing:

export interface UserPreferencesState extends EntityState<UserPreference> {}

export const adapter: EntityAdapter<UserPreference> = createEntityAdapter<UserPreference>({
  selectId: (element: UserPreference): string => element.key,
});

export const initialState: UserPreferencesState = adapter.getInitialState({});

const reducerFn = reducerWithInitialState(initialState)
  .case(storeUserPreference, (state: UserPreferencesState, userPreference: UserPreference) => adapter.addOne(userPreference, state))
  .case(removeUserPreference, (state: UserPreferencesState, key: string) => adapter.removeOne(key, state))
  .case(clearAllUserPreferences, (state: UserPreferencesState) => adapter.removeAll(state))
  .build();

// tslint:disable-next-line:only-arrow-functions
export function reducer(state: UserPreferencesState | undefined, action: Action): UserPreferencesState {
  return reducerFn(state, action);
}

export const {
  selectIds: selectUserPreferenceKeys,
  selectEntities: selectUserPreferenceEntities,
  selectAll: selectAllUserPreferences,
  selectTotal: selectUserPreferenceTotal,
}: EntitySelectors<UserPreference, UserPreferencesState> = adapter.getSelectors();

[timdeschryver]

Since everything is working, I would say this is issue should be handled by the local storage library instead of NgRx? Or is it NgRx that is causing this issue?

[timdeschryver]

Possibly because of #1445 (comment)
@itayod do you want to pick this one up?

[itayod]

sure, I would be happy to :)

[itayod]

@timdeschryver from a brief look at the code, I think I might have found the bug...

I reproduced it made some changes and it looks like it is working fine :).

I will make some more tests and open a pr this weekend