React / Redux - Supposons que nous ayons deux listes distinctes de tâches à accomplir, complétées et non complétées.

Question

Je viens d'apprendre React / Redux il n'y a pas longtemps et je pense à un scénario qui n'est probablement pas trop rare.

Supposons que nous ayons un simple tableau d'objets qui sont des tâches à accomplir, et que nous ayons simplement deux boîtes à l'écran : Terminé et Inachevé. Lorsque nous cliquons sur un élément de la boîte Inachevé, il doit être immédiatement déplacé et affiché dans la boîte Achevé.

Quelle serait la meilleure façon de filtrer ces éléments de tableau, dans REDUX ? ou dans REACT ? Lequel de ces deux exemples ci-dessous est la meilleure pratique pour cet exemple particulier ? Je vous remercie.

A) Un utilisateur clique sur un élément de la liste des tâches non achevées, ce qui déclenche un créateur d'action qui envoie une action de type "ITEM_COMPLETED". Cette action est écoutée à la fois dans les réducteurs d'éléments non terminés et d'éléments terminés. Dans le réducteur d'éléments non complétés, lorsque cette action est "entendue", une méthode de filtrage est simplement appelée sur le tableau courant pour supprimer l'élément qui a été transmis, et dans la liste des éléments complétés, l'élément est simplement ajouté au tableau étalé. De cette manière, l'élément sera supprimé de la division Uncompleted et semblera avoir été déplacé vers la division Completed.

ou...

B) Il n'y a qu'une seule action, de type ACTION_TOGGLE. Lorsqu'un objet est cliqué depuis la liste Uncompleted, par exemple, il passe par un créateur d'action qui crée un tout nouvel objet avec la valeur Completed fixée à TRUE, supprime l'ancien objet todo du tableau, puis crée une nouvelle copie du tableau pour le tout nouvel état avec ce nouvel objet ajusté inséré... Et MAINTENANT, la logique de séparation des éléments sur la couche VIEW dans react se trouverait dans le conteneur react à la place. Par exemple, la méthode de rendu prendrait TOUS les éléments et les placerait dans la DIV A s'ils sont filtrés en tant que valeurs non complétées, et les placerait dans la DIV B s'ils sont filtrés en tant que valeurs complétées, donnant ainsi l'impression à l'utilisateur que certains éléments sont dans une boîte non complétée, et que d'autres sont dans la boîte complétée.

Gracias.

Answer 1

TL;DR : Option B, car meilleure séparation des préoccupations (ce qui est important pour l'avenir de votre application, pas nécessairement pour le présent).

Vous avez une liste de tâches dont l'état est en train de changer. Il y a deux façons de voir les choses :

Type 1 : Fondamentalement, j'ai 2 types de tâches.

Tâches terminées et tâches non terminées. Dans ce cas, votre état contient 2 objets et ainsi de suite. Dans ce cas, l'option A semble être l'approche la plus correcte.

const completedTodos = [{}, {}];
const uncompletedTodos = [{}, {}];

Type 2 : J'ai une liste de tâches ayant chacune des attributs différents.

Chaque tâche a un statut terminé/non terminé. Dans ce cas, l'option B semble correcte.

const todos = [{...completed: true}, {...completed: false}];

En quoi cela est-il important ?

Car cela détermine la façon dont vous percevez votre candidature. À l'avenir, ajouterez-vous d'autres choses à votre liste de choses à faire ? Dans ce cas, aurez-vous plusieurs types de tâches (A) ou des tâches ayant plusieurs étiquettes (B) ?

Par exemple : Supposons que vous décidiez d'ajouter des tags à votre todo. Dans ce cas, avoir un reducer pour gérer l'action {type: TOGGLE_TAG, data: {id: <todoid>, tag}} semble être une meilleure solution, similaire à ce que vous avez dans l'option B pour gérer le statut "terminé".

C'est à la vue, c'est-à-dire au composant react, de déterminer comment afficher ces données. Ainsi, si vous avez besoin d'itérer à travers la liste, de la filtrer pour créer deux listes différentes, etc., c'est l'affaire de la vue et la logique pour cela devrait être dans le composant React render() méthode.

Answer 2

Je dirais que dans cet exemple simple, l'approche B est probablement la meilleure et la plus directe. Vous pouvez simplement stocker des tableaux d'objets Todo avec la valeur completed fixée à true, puis laisser les vues connectées au magasin décider de ce qu'il faut afficher et où.