Comprendre l'utilité du projet ngrx router-store par rapport à l'utilisation du seul routeur angular 2

Question

Je fais référence à la projet ngrx du router-store ( https://github.com/ngrx/router-store ).

Je ne sais pas comment utiliser ce projet...

Prenons l'exemple suivant, tiré de la documentation du projet :

store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));

Est-il destiné à remplacer le routeur angulaire 2 ? router.navigate(['/path... ?

...ou dois-je utiliser le magasin de routeurs ngrx uniquement dans certaines circonstances ? (si oui, lesquelles ?)

Que se passe-t-il également pour le router-store ngrx lorsqu'un lien html de routeur angulaire 2, par exemple, est créé ? <a routerLink="/heroes" est cliqué ?

Plus généralement, quelqu'un peut-il expliquer ce qu'apporte le projet ngrx router-store par rapport à l'utilisation du simple routeur angular 2 ?

Ou pour reformuler, qu'apporte le ngrx router-store en plus du routeur angulaire 2 ?

Éditer : Une source intéressante d'informations et d'exemples sur ngrx est bien sûr l'application d'exemple ngrx ( https://github.com/ngrx/example-app ).

J'y ai trouvé une dépendance vers le router-store mais je n'ai pas réussi à trouver où le router-store est utilisé dans l'application...

Pour information, voici le commentaire que l'on trouve dans l'application d'exemple à propos du magasin de routeurs :

@ngrx/router-store maintient l'état du routeur à jour dans le magasin et utilise le magasin comme source unique de vérité pour l'état du routeur.

Answer 1

En @ngrx/router-store existe pour que le magasin puisse être l'entreprise la plus importante du pays. source unique de vérité pour l'état de routage d'une application.

Sans cela, l'état de l'application - l'itinéraire actuel - ne serait pas représenté dans le magasin. Cela signifie que le débogage par voyage dans le temps à l'aide de la fonction DevTools ne serait pas possible, car il n'y aurait pas d'état dans le magasin représentant l'itinéraire et il n'y aurait pas d'actions représentant les changements d'itinéraire.

En router-store ne remplace pas le routeur Angular ; il ne fait que connecter des récepteurs pour les actions de routage et pour le routeur lui-même.

Lorsque vous émettez une action de routage à l'aide de la fonction go créateur d'actions , a "[Router] Go" contenant le chemin d'accès spécifié est entendue par l'action router-store qui appelle alors la méthode correspondante du routeur. Lorsque la méthode router-store entend - de la part du routeur - que l'itinéraire a changé, il émet un "[Router] Update Location" représentant le changement d'itinéraire et cette action entraîne la mise à jour de l'état du routeur dans le magasin.

Si, au lieu d'utiliser le go créateur d'actions, a routerLink est utilisé pour effectuer un changement d'itinéraire, router-store entendra le changement et émettra un "[Router] Update Location" qui verra l'état du routeur du magasin mis à jour.

Ainsi, que l'itinéraire soit modifié par des actions ou des liens plus traditionnels, le magasin contient toujours l'état du routeur.

Avec la "[Router] Update Location" représentant les changements d'itinéraire, vous pouvez annuler ces changements d'itinéraire via les DevTools - ce qui ne serait pas possible si l'état du routeur n'était pas représenté dans le magasin.

Si vous n'avez pas utilisé les Redux DevTools, je vous recommande d'y jeter un coup d'œil :

• Extension Redux DevTools
• @ngrx/store-devtools
• @ngrx/store-log-monitor

Answer 2

Un exemple.

Disons que vous avez un identifiant sélectionné que vous passez dans l'état du routeur. Cet identifiant fait référence à un client.

Votre URL ressemble à ceci : myapp.com/customers/7755664

Lorsque vous passez à la vue d'édition du client, vous pouvez écrire un sélecteur qui récupère l'entité client en utilisant l'identifiant de l'état du routeur. Supposons que vous souhaitiez faire défiler les clients. Vous naviguez vers myapp.com/customers/7755653. Le sélecteur renvoie le client, l'appel select émet et votre vue se réaffiche avec le nouveau client.

Il simplifie les sélecteurs et remplace la nécessité d'avoir une propriété selectedcustomer dans votre état.