Welches Muster zum Speichern des ausgewählten Elements einer Liste in Redux

Question

Stellen wir uns vor, ich möchte eine Aufgabe in der Todo mit React-Redux auswählen können. Wo soll ich diesen Zustand speichern?

Erste Lösung: Fügen Sie ein isActive: true Ausprägungs zur Aufgabe

Zweite Lösung: Erstellen Sie ein neues Minderer nur die ID des ausgewählten Elements zu handhaben.

Ich mag beide Lösungen nicht: die erste fühlt sich an, als würde ich etwas ohne Bezug auf die Aufgabe darin speichern, die zweite fühlt sich übermüdet, um einen ganzen Reduzierer zu erschaffen, nur um eine ID zu speichern.

Gibt es noch eine andere Option? Was ist das Beste? Danke

Answer 1

Ich würde sagen, es hängt von Ihrem Anwendungsfall ab.

1. Für eine große Anwendung, die Tonnen von UI Zustand hat zu bestehen, macht es sehr viel Sinn eine besondere Minderer haben Sie eine Scheibe des Ladens mutieren zu der Benutzeroberfläche zusammen.

2. Es ist zulässig, eine isActive: boolean Eigenschaft pro Aufgabe zu haben, wenn mehrere Aufgaben gleichzeitig aktiv sein können. Auch wenn es aus Sicht der Task-Daten nicht mit der Task verknüpft ist, handelt es sich tatsächlich um eine Anwendungsperspektive der Task. Das Hauptziel Ihres redux-Shops ist es, Ihre Anwendungsquelle der Wahrheit zu sein, anstatt nur Ihre API-Datenmodelle zu spiegeln.

3. Sie können auch eine einzelne isActive: id haben, wenn Sie nur eine einzelne Aufgabe zu der Zeit aktiv/ausgewählt haben können.

4. Sie können auch einfach den Komponentenstatus verwenden. Die Einschränkung besteht darin, dass es nicht bestehen bleibt und nicht geteilt wird. Wenn Sie beispielsweise eine Schaltfläche zum Speichern haben möchten, muss sich diese Schaltfläche in der Komponente mit dem ausgewählten Status befinden.

Answer 2

Es gibt nichts wirklich falsch mit einer der beiden Optionen, die Sie aufgelistet haben. Aber, wenn Sie nach anderen Möglichkeiten suchen, können Sie

1) Fügen Sie das ausgewählte Element in dem todos Minderer Zustand, so dass Ihr Zustand Objekt würde wie folgt aussehen:

{ 
    selected: id, 
    list: [{id, text, completed}, ...] 
} 

2) Wenn Sie don Wenn Sie den ausgewählten Artikel an keiner anderen Stelle in Ihrer App benötigen, können Sie ihn einfach in Ihrem lokalen Status speichern. Es ist nicht falsch, Redux für den Anwendungsstatus und den lokalen Status für Daten zu mischen, die ausschließlich in Ihrer Komponente enthalten sind.