# Ngrx store & effects using Storage?

**URL:** <https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522>\
**Category:** ionic-v3\
**Created:** [November 17, 2017, 5:09pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522 "2017-11-17T17:09:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [November 17, 2017, 5:09pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/1 "2017-11-17T17:09:02Z")

</div>

Having a hard time learning Ngrx effects. I’m using ngrx/store to manage my state. However, I’d like to have Ngrx effects to handle saving to Ionic Storage when state is changed. However, I’m not sure how I can do that.

I have the following code, but dispatching with type UPDATE\_SETTINGS won’t get the changed state, so I can’t really change it in the storage. Does anyone have a similar example of using ngrx/effects? anything similar to this would help. Thanks!

```auto
import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { Actions, Effect } from "@ngrx/effects";
import {
  GET_SETTINGS,
  UPDATE_SETTINGS,
  UPDATE_SETTINGS_SUCCESS,
  Action,
  AppState
} from '../_reducers/settings.reducer';
import { StorageProvider } from '../providers/storage/storage';
import { Observable } from "rxjs";

const storageKey = 'settings';

@Injectable()
export class SettingsEffects {
  constructor(
    private storage: StorageProvider,
    private actions$: Actions,
    private store$: Store<AppState>
  ) {}

  @Effect() get$ = this.actions$
    .ofType(GET_SETTINGS)
    .mergeMap((action: any) => Observable.fromPromise(this.storage.get(storageKey))
        .map(data => ({ type: UPDATE_SETTINGS, payload: data }))
        .catch(() => Observable.of()))
    .catch(() => Observable.of());

  @Effect() update$ = this.actions$
    .ofType(UPDATE_SETTINGS)
    .switchMap(() => {
      return Observable.of({ type: "UPDATE_SETTINGS_SUCCESS" })
    });

  @Effect() updateSuccess$ = this.actions$
    .ofType(UPDATE_SETTINGS_SUCCESS)
    .do(() => {
      console.log('update settings success called');
    })
    .withLatestFrom(this.store$)
    .switchMap(([payload, store] : any) => {
      return Observable.fromPromise(this.storage.set(storageKey, store.settings))
        .catch(() => Observable.of())
    })
    .catch(() => Observable.of());
}

```

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [November 30, 2017, 4:27pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/2 "2017-11-30T16:27:56Z")

</div>

this is my answer to my question.

```auto
import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { Actions, Effect } from "@ngrx/effects";
import {
  GET_SETTINGS,
  UPDATE_SETTINGS,
  UPDATE_SETTINGS_SUCCESS,
  Action,
  AppState
} from '../_reducers/settings.reducer';
import { StorageProvider } from '../providers/storage/storage';
import { Observable } from "rxjs";

const storageKey = 'settings';

@Injectable()
export class SettingsEffects {
  constructor(
    private storage: StorageProvider,
    private actions$: Actions,
    private store$: Store<AppState>
  ) {}

  @Effect() get$ = this.actions$
    .ofType(GET_SETTINGS)
    .mergeMap((action: any) => Observable.fromPromise(this.storage.get(storageKey))
        .map(data => ({ type: UPDATE_SETTINGS, payload: data })));

  @Effect() update$ = this.actions$
    .ofType(UPDATE_SETTINGS)
    .withLatestFrom(this.store$, (action, state) => state.settings)
    .map((settings) => settings)
    .switchMap((settings) => {
      // update storage
      this.storage.set(storageKey, settings);
      return Observable.of({ type: "UPDATE_SETTINGS_SUCCESS" })
    });
}

```

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [December 29, 2017, 1:30am UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/3 "2017-12-29T01:30:46Z")

</div>

Just writing that I’m not using Ngrx/Store & Ngrx/Effects anymore. It’s so time consuming to use ngrx/store, instead i’ve wrote my own state management using Service, which works way better 🙂

---

<div class="post-metadata">

**Author:** ![michaelcpell](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/michaelcpell/32/115503_2.png) [@michaelcpell](https://forum.ionicframework.com/u/michaelcpell)\
**Post date:** [February 8, 2018, 6:10am UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/4 "2018-02-08T06:10:52Z")

</div>

Curious to learn more about this decision. What caused you to give up on the Redux pattern?

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [February 8, 2018, 9:31am UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/5 "2018-02-08T09:31:20Z")

</div>

> [@michaelcpell](#):
>
> What caused you to give up on the Redux pattern?

That’s not what he said. ngrx is a specific Redux implementation. It is powerful, but it requires a lot of boilerplate, and it takes some time to get your head around, because you need to understand MemoizedSelectors. You can roll your own Redux (without selectors or effects) pretty easily. Maybe he stopped using Redux, I don’t know, but that isn’t the same as ngrx.

---

<div class="post-metadata">

**Author:** ![michaelcpell](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/michaelcpell/32/115503_2.png) [@michaelcpell](https://forum.ionicframework.com/u/michaelcpell)\
**Post date:** [February 8, 2018, 3:49pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/6 "2018-02-08T15:49:29Z")

</div>

Ah, my mistake, I thought a “service” based data store was a distinct pattern from “redux”. There is so much lingo in this corner of eng that I must be confused.

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [February 8, 2018, 3:53pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/7 "2018-02-08T15:53:35Z")

</div>

A service is the same as a provider. Any implementation of a data management strategy in Angular will use providers. Redux is the name of a strategy, not an implementation.

---

<div class="post-metadata">

**Author:** ![reverYoungFo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reveryoungfo/32/117422_2.png) [@reverYoungFo](https://forum.ionicframework.com/u/reverYoungFo)\
**Post date:** [February 28, 2018, 7:51pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/8 "2018-02-28T19:51:07Z")

</div>

@ozexpert Is it an open source code? I would like to see at least your folder structure in project.

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 28, 2018, 9:02pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/9 "2018-02-28T21:02:40Z")

</div>

@reverYoungFo unfortunately it’s not an open source project.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:03pm UTC](https://forum.ionicframework.com/t/ngrx-store-effects-using-storage/112522/10 "2021-07-19T22:03:29Z")

</div>