Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Need Help - Store not stored in localstorage

See original GitHub issue

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];

    declarations: [
    exports: [],
    imports: [
    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;
            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) {
            new LanguageActions.AddLanguage({
                tag: language.tag,
                language: language.language,

// This is an image of local storage after dispatching the action bildschirmfoto 2018-10-19 um 12 30 09

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:6

github_iconTop GitHub Comments

pilz97commented, Dec 13, 2018

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-0commented, Nov 22, 2021

I got the same issue when using nx.

My app structure is like:

// Entry, no real business code inside
// Business code models  

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

storing data in local storage is not working correctly
The problem I'm having is that I want to be able to store product data for more than 1 products unfortunately, only one...
Read more >
localStorage in JavaScript: A complete guide - LogRocket Blog
Do not store sensitive user information in localStorage; It is not a substitute for a server based database as information is only stored...
Read more >
Window.localStorage - Web APIs | MDN
The localStorage read-only property of the window interface allows you to access a Storage object for the Document 's origin; the stored ......
Read more >
LocalStorage, sessionStorage - The Modern JavaScript Tutorial
LocalStorage, sessionStorage · Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much ......
Read more >
Please Stop Using Local Storage - Randall Degges
To keep it short, here's the only situation in which you should use local storage: when you need to store some publicly available...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found