So trennen Sie den UI- und Anwendungsstatus in Redux

Question

Beim Schreiben einer react-redux-Anwendung muss ich sowohl den Anwendungs- als auch den UI-Status im globalen Statusbaum beibehalten. Was ist der beste Ansatz, um seine Form zu gestalten?

Lets sagen, dass ich eine Liste der ToDo Elemente haben:

{ 
    items: [ 
    { id: 1, text: 'Chew bubblegum' }, 
    { id: 2, text: 'Kick ass' } 
    ] 
} 

Jetzt möchte ich die Benutzer wählen lassen und die Elemente erweitern. Es gibt (mindestens) zwei Möglichkeiten, wie die Zustandsform zu modellieren:

{ 
    items: [ 
    { id: 1, text: 'Chew bubblegum', selected: true, expanded: false }, 
    { id: 2, text: 'Kick ass', selected: false, expanded: false } 
    ] 
} 

Aber das ist das Mischen der UI-Zustand (selected und expanded) mit dem Anwendungszustand. Wenn ich die ToDo-Liste auf dem Server speichere, möchte ich nur den Anwendungsstatus und nicht den UI-Status speichern (in der Real-World-App kann der UI-Status modale Dialoge, Fehlermeldungen, Validierungsstatus usw. enthalten).

Ein weiterer Ansatz ist ein weiteres Array für den UI-Zustand der Elemente zu halten:

{ 
    items: [ 
    { id: 1, text: 'Chew bubblegum' }, 
    { id: 2, text: 'Kick ass' } 
    ], 
    itemsState: [ 
    { selected: true, expanded: false }, 
    { selected: false, expanded: false } 
    ] 
} 

Dann müssen Sie diese beiden Staaten kombinieren, wenn ein Element zu machen. Ich kann mir vorstellen, dass man zip diese beiden Arrays in der connect Funktion einfach zu machen machen:

const TodoItem = ([item, itemState]) => ...; 
const TodoList = items => items.map(item => (<TodoItem item={item} />)); 

export default connect(state => _.zip(state.items, state.itemsState))(TodoList); 

Aber Updates zu Staat kann schmerzhaft sein, weil items und itemsState muss synchron gehalten werden:

1. Beim Entfernen eines Artikels muss der entsprechende itemState entfernt werden.
2. Beim Nachbestellen von Artikeln muss itemsState ebenfalls neu geordnet werden.
3. Wenn die Liste der Aufgaben vom Server aktualisiert wird, ist es erforderlich, IDs im UI-Status zu behalten und eine Abstimmung durchzuführen.

Gibt es noch eine andere Option? Oder gibt es eine Bibliothek, mit der App-Status und UI-Status synchronisiert werden?

Answer 1

Ein weiterer von normalizr inspiriert Ansatz:

{ 
    ids: [12,11], // registry and ordering 
    data: { 
     11: {text: 'Chew bubblegum'}, 
     12: {text: 'Kick ass'} 
    }, 
    ui: { 
     11: { selected: true, expanded: false }, 
     12: { selected: false, expanded: false } 
    } 
} 

Answer 2

ich derzeit selbst Projekt für eine Seite in diesem suchen. Ich werde es ähnlich wie Ricks Methode oben angehen. Die Daten {} dienen als Quelle der Wahrheit, und Sie verwenden diese, um lokale ui-Änderungen in (den aktuellsten Zustand widerspiegeln) zu drücken. Sie müssen die Daten und ui zusammen vor dem Rendern zusammenführen, und ich selbst habe das an einigen Stellen versucht. Ich werde sagen, soweit es synchron ist, sollte es nicht so schlimm sein. Wenn Sie Daten speichern/abrufen, aktualisieren Sie die Daten {} und bereinigen ui {}, um sich auf den nächsten Anwendungsfall vorzubereiten.