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
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/a7ca4555-00b1-408d-8098-678ff65ef693%40googlegroups.com.
