"view" -Funktion in Redux-Status einbeziehen

Question

In einer Anwendung, die sich mit Posts und Kommentaren beschäftigt, möchte ich meinen Zustand in einer flachen, normalisierten Struktur halten, um so flexibel wie möglich zu sein. Insbesondere möchte ich alle Posts und Kommentare als Schlüssel-Wert-Paare haben, wobei der Schlüssel die ID des Posts oder Kommentars ist und der Wert der Post oder der Kommentar ist. Das heißt, sieht mein Zustand wie folgt aus:

state = { 
    posts: new Map(), 
    comments: new Map() 
}, 

Dieser Zustand Struktur vereinfacht die meisten der Minderer Fälle. In den Komponenten jedoch muss ich immer wieder folgendes tun ein Array der Beiträge oder Kommentare zu erhalten:

Array.from(this.props.posts.values()) 

Wo this.props.posts die redux staatlichen Beiträge an den Stützen der jeweiligen Komponente zugeordnet sind.

Gibt es eine Möglichkeit, das letzte Code-Snippet dem Zustand hinzuzufügen, ähnlich einer Ansicht in einer relationalen Datenbank? Ich versuchte

state = { 
    posts: new Map(), 
    comments: new Map(), 
    postArray:() => { return Array.from(posts.values()) } 
}, 

Aber das scheint nicht zu funktionieren.

Answer 1

Siehe Abschnitt Structuring Reducers der Redux-Dokumentation, speziell den Abschnitt Normalizing State Shape.

Wir empfehlen, dass ein typischer normalisierte Zustand Schnitt wie wie soll:

users : { 
    byId : {}, 
    allIds : [] 
} 

Sie auch memoized "selector" functions verwenden sollen, um den Prozess der Ableitung von Daten aus dem Speicher Zustand zu verkapseln.

Auch ich persönlich bin ein großer Fan der Verwendung der Redux-ORM library als Abstraktionsschicht für die Verwaltung normalisierter Daten in einem Redux-Shop. Meine "Practical Redux" tutorial series zeigt, wie man es benutzt.

Ich habe Links zu weiteren Artikeln über Reduzierstücke, Selektoren und Normalisierung in der Redux Reducers and Selectors Abschnitt meiner React/Redux links list.

Answer 2

Sie können eine Komponente höherer Ordnung verwenden, um Ihre Komponente zu verpacken und die zusätzliche Stütze darin einzufügen. Ich würde vorschlagen, withProps aus der recompose-Bibliothek zu suchen, um dies in einer prägnanten Weise zu tun.