Need Help - Store not stored in localstorage

[msprogramando]

Dear Devs, please help me. Perhaps you see directly what i am doing wrong. I cannot store the state and I can't find it in the localstorage.

I added this to my app.module.ts -> BTW: I had to replace IState with any to not getting an error.

import {StoreModule, ActionReducerMap, ActionReducer, MetaReducer} from '@ngrx/store';
import {localStorageSync} from 'ngrx-store-localstorage';
import {languageReducer} from "./store/reducers/language";

const reducers: ActionReducerMap<any> = {languageReducer};

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

const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];

@NgModule({
    declarations: [
        AppComponent,
        LanguageSelectComponent
    ],
    exports: [],
    imports: [
        ...
        StoreModule.forRoot(
            reducers,
            {metaReducers}
        )
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

// Action

import {Injectable} from '@angular/core'
import {Action} from '@ngrx/store'
import {Language} from "../interfaces/language";

export const ADD_LANGUAGE = '[LANGUAGE] Add';

export class AddLanguage implements Action {
    readonly type = ADD_LANGUAGE;
    constructor(public payload: Language) {
    }
}

export type Actions = AddLanguage

// Reducer

import {Action} from '@ngrx/store'
import {Language} from "../interfaces/language";
import * as LanguageActions from './../actions/language'

const initialState: Language = {
    id: 0,
    language: 'No Language Selected',
    tag: 'no-LG',
    country: 'Nolang'
};

export function languageReducer(state: Language = initialState, action: LanguageActions.Actions) {
    switch (action.type) {
        case LanguageActions.ADD_LANGUAGE:
            console.log(action.payload); -> is working
            return action.payload;
        default:
            return state;
    }
}

// In component

    constructor(private store: Store<AppState>) {
        store.pipe( select((state:any) => state.language) )
            .subscribe( (language) => { this.language$ = language; console.log(language) } );
    }

    onSelect(language) {
        this.store.dispatch(
            new LanguageActions.AddLanguage({
                id: language.id,
                tag: language.tag,
                language: language.language,
                country: language.country,
            })
        );

// This is an image of local storage after dispatching the action

[msprogramando]

It seems the localStorageSync will never get reaced.

[pilz97]

Hello,

did you already found a solution? I have the same issue :(

[amaia00]

same issue here.

[msprogramando]

No solution found yet

[pilz97]

Hi @msprogramando,

I got it to work finally! :)

`const reducers: ActionReducerMap<AppState> = { settingsState: settingsReducer };

export function localStorageSyncReducer(reducer: ActionReducer<AppState>): ActionReducer<AppState> { return localStorageSync({ keys: ['settingsState'], rehydrate: true })(reducer); } const metaReducers: MetaReducer<AppState, Action>[] = [localStorageSyncReducer];`

and in the imports it looks like: StoreModule.forFeature('settings', reducers, { metaReducers }),

[will-hu-0]

I got the same issue when using nx.

My app structure is like:

// Entry, no real business code inside
apps/main/src/app
  app.module.ts
  
// Business code models  
libs/myApp/src/lib..
  myApp.module.ts

I got it to work finally by moving ngrx root, etc from apps main model to libs/myApp.