Angular - Redux / Ngrx, Alternatives for state management

For a while now I have looked into Redux and Ngrx for Angular and have read a few tutorials on it but I still find it confusing and also a lot of extra work.

I was wondering if there's a simpler way or library to get application state management working without having to add all the extra files and code.

I would not even think of using it for small projects but as for large projects it might be handy for debugging but I'm still wondering what the alternatives are, and if there's a simpler / less confusing way to integrate state management into your application?
LVL 1
error2013Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The simplest way is to add a service. But you will find if you do this that you end up writing the interfaces to that service anyway - not much more work than with ngrx.
0
error2013Author Commented:
What are the basic's of handling application state with a service? Do you have a link or simple example?
0
Julian HansenCommented:
A service is a global singleton that can be injected into any component.

So you would do something like this
import { Injectable } from '@angular/core';
// Any other module imports
@Injectable()
export class StateService {
  // State data here in whatever form you want
  private dataItem1: Type;
  private dataItem2: SomeOhterType
 
  // INJECT ANY DEPENDENCIES HERE
  constructor() {  }

  // METHODS

   getDataItems() {
      // return data or promise or observable here depending on requirements
   }

   setStateItem(item: Type, value:Type) {
         // set state here - parameters may vary depending on requirements
   }

   // Other state functions here
}

Open in new window

In your App.module.ts
import { StateService } from './services/state.service';
// ... Other imports
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [StateService, /* ... Other providers */],
  bootstrap: [AppComponent]
})

Open in new window


Using the service
import { Component, OnInit } from '@angular/core';

import { StateService } from '../services/state.service';

import { Observable } from 'rxjs';

@Component({
  selector: 'app-shot-complete',
  templateUrl: './shot-complete.component.html',
  styleUrls: ['./shot-complete.component.css']
})
export class SomeComponent implements OnInit {
  data: Observable<Items[]>;
  constructor(private stateService: StateService) { 

  }

  ngOnInit() {
    this.stateService.getDataItems().subscribe(data => this.data = data);
  }

  // Event handler
  doSomethingUseful(item:string, value:string) {
    this.stateService.setStateItem(item. value);
  }
}

Open in new window

The above is for illustration only - it is not presented as working code.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
error2013Author Commented:
Thanks :)
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.