Need Help - Store not stored in localstorage
See original GitHub issueDear 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:6
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 }),
I got the same issue when using
nx
.My app structure is like:
I got it to work finally by moving
ngrx root, etc
fromapps main
model tolibs/myApp
.