Store in Angular, with async processes : no Redux please

[Hervé Le Cornec]

Hello,

Redux is useless in Angular, worth, it can be harmfull, by causing a lot of useless complexity that will be handicapping. 

Redux is made to store the states of the variables of your application, but Angular is two-way data binding, so the states of the variables are watched natively. So using a store is surely a good practice, but it has to be done the Angular way. Following is an example of how to achieve so.

Also note that Angular is natively designed to handle the asynchronism, which is by the way everywhere in javascript (loadings, events, ...). Therefore the injection of pure rxjs observables, or "| async", is useless in the most large majority of situations. You only have to use the elvis operator "?." in order to handle the async variables in the HTML templates.

Here is a simple example of a store as a native Angular service, handling async processes.

1) The store as an Angular service

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root'

})

export class StoreService {

  customer: any;

  constructor() { }

}

2) An api service to retrieve the data, and store it inside the store (a timeout is used to simulate an async process)

import { Injectable } from '@angular/core';

import { StoreService } from './store.service'

@Injectable({

  providedIn: 'root'

})

export class ApiService {

  constructor(

    private store: StoreService

  ) { }

  getData() {

    setTimeout(()=> {

      this.store.customer = {

        name: 'Bob',

        age: 25

      }

    }, 2000);

  }

}

3) A component importing the store, and retrieving the data

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

import { ApiService } from '../api.service'

import { StoreService } from '../store.service'

@Component({

  selector: 'app-mycomponent',

  templateUrl: './mycomponent.component.html',

  styleUrls: ['./mycomponent.component.css']

})

export class MycomponentComponent implements OnInit {

  constructor(

    private api: ApiService,

    private store: StoreService

  ) { }

  ngOnInit() {

    this.api.getData();

  }

}

4) The HTML template of the former component (note the use of the elvis operator "?." to manage the async variables)

<ul>

  <li>Name : {{store.customer?.name}}</li>

  <li>Age : {{store.customer?.age}}</li>

</ul>

All the components importing the same store will be two-way data binded : any change of store.customer.name, for instance, in one component, performed either from the DOM or the script, will natively propagate to all other components. At any time the store is the image of the current state of your application. You can for instance backup it (to server, to IndexedDb, ...) in order to setup a rewind/forward behavior.

You can not build such a powerfull store with so few lines of code using Redux.

I hope this can help.

Cheers

[Brad Clements]

Greetings,

Reading this post, and your other one regarding observables makes wonder the point you wish to make.

Certainly most angular 2+ applications  do not need redux, nor a 'store' of any kind.  This AiA podcast with Wes Grimes makes that rather clear https://devchat.tv/adv-in-angular/aia-260-ngrx-the-mystical-machine-with-wes-grimes/

Keeping in mind that your sample code is very simple, I wonder how you expect your component to show "Name: Susan" when some other component has changed the value in the store after the setTimeout has fired.  I believe Observables would be the easiest mechanism for that.

Additionally, if you're writing code that other experienced angular developers will need to maintain, I expect they'll be surprised finding lots of setTimeout calls sprinkled around rather than using Observables.

Perhaps you used setTimeout simply as an alternative example of updating values w/o using observables. Event listeners would also be another example. 

[Hervé Le Cornec]

Hello Brad,

Thanks for your add.

You are right : speaking is something, acting is an other thing.

So go to oceanvirtuel.eu (Angular 7 + Node + Mongo, NOAA, ...), and judge the complexity by regestering to the next regatta.

You will then tell me about complexity of web apps.

Do not postulate that my example above is simple because I am simple, you would mistake yourself. I am using simple codes because it needs simple coding. I am telling you about experience, even if you do not like it.

OceanVirtuel V12  has been built in 3 months, front, back, and tests included, with only one developer. You will never been able to produce such a hit in such a time with your method, whatever it can b ... that you did not describe by the way ...

So Brad, you are certainly strong, but please do believe that some other can also produce fine things.

If you do not like mine, please do produce us your own recomandations about Angular, and prove that you are not a fake, with codes as I did.

We are waiting for.

Cheers

[Tito]

Sembles un peux tros faché pour technologie