Implémentation de la recherche avec ngrx/store angulaire 2

Question

J'essaie d'implémenter une fonction de recherche pour une application écrite en angulaire 4. C'est essentiellement pour une table qui montre beaucoup de données. J'ai également ajouté le magasin ngrx. Quelle est la bonne façon d'implémenter une recherche d'une application avec le magasin? Actuellement, je vide le magasin à chaque fois, pour la requête de recherche, puis je le remplis avec les données que j'ai reçues de l'appel asynchrone vers l'arrière-plan. Je montre ces données dans le HTML alors. L'appel asynchrone est fait à partir d'un fichier d'effets.

Answer 1

J'ai récemment implémenté une fonction de recherche avec Angular 4 et @ngrx. La façon dont je l'ai fait était d'envoyer une action EXECUTE_SEARCH pour définir la chaîne de requête à votre magasin et déclencher un effet. L'effet a déclenché l'appel asynchrone. Lorsque l'appel asynchrone renvoyé, j'ai envoyé une action FETCH_SUCCESSFUL ou une action FETCH_FAILURE en fonction du résultat. En cas de succès, je définis le résultat dans mon magasin.

Lorsque vous effacez le résultat dans votre magasin, dépend vraiment du comportement souhaité. J'ai mon projet, j'ai effacé le résultat sur FETCH_SUCCESSFUL, en remplaçant l'ancien résultat. Dans d'autres cas, il peut être raisonnable d'effacer le résultat du magasin lorsque vous exécutez une nouvelle recherche (dans le réducteur EXECUTE_SEARCH).

Answer 2

Eh bien, puisque je ne trouve pas de réponse à cette question pendant longtemps, je pris une approche de sauver toutes les données provenait de l'arrière puis rechercher les données manière suivante:

Je mis en place un effet de recherche qui déclencherait un appel asynchrone à l'extrémité arrière. De l'arrière, je retournais à la fois les résultats de la recherche ainsi que leurs identifiants. Cet effet après avoir reçu les données déclencherait l'action de recherche complète. Ensuite, dans cette action de réduction, je stockais les identifiants des résultats dans mon état avec un nom searchIds et j'avais créé un état avec des entités de nom qui était essentiellement une carte de données avec les identifiants comme clé.

Les données qui seraient reçues à partir de l'extrémité arrière seraient filtrées pour vérifier si elles sont déjà présentes dans le magasin ou non, sinon elles ont été ajoutées aux entités. Après cela, je m'étais abonné à un sélecteur qui chercherait essentiellement les clés présentes dans searchIds et ne me renverrait que les données des entités. Comme c'était une carte ayant déjà des identifiants comme clés, il était très efficace de faire des recherches en fonction des searchIds et je n'avais pas non plus besoin d'effacer les données que j'avais déjà. Ceci à son tour maintenu le véritable but d'un @ ngrx/store pour mettre en cache toutes les données que je recevais.