Redux: Best Practice für den Umgang mit normalisierten Entitäten?

Erstellt am 19. Aug. 2015  ·  3Kommentare  ·  Quelle: reduxjs/redux

In meiner ersten App mit Redux versuche ich, meine Sammlungen wie empfohlen zu normalisieren. Auf diese Weise müssen Sie die Entitäten nur an einer Stelle ändern. (das fühlt sich für mich richtig an)

Zuerst habe ich mein Datenarray erfolgreich auf ein Array-ähnliches Objekt von Entitäten mit den IDs als Schlüssel normalisiert

Dann wollte ich die Entitäten in einer Ansicht auflisten, also musste ich sie zurück in ein Array analysieren. Auch wenn ich meine Entitäten filtern möchte, brauche ich das echte Array. Ist das wirklich der richtige Ansatz?

Beispiel mit erneuter Auswahl:

    // As "id" for my images i use "uri"

    imageEntities = {
     uri1: {image...},
     uri2: {image...},
    ....
    }

    // Selectors:
    const imagesSelector = state => state.images;

    // parse the Array-like-Object to an Array
    const imagesArySelector = createSelector(
      [imagesSelector],
          images => {
            let ary = [];
            for (var key in images) {
              if (images.hasOwnProperty(key)) {
                ary.push(images[key]);
              }
             }
            return ary;
          }
     );

    // filter the Array to get only the new images
    export const newImagesSelector = createSelector(
      [imagesArySelector],
        images => images.filter(image => image.isNew)
     );

Ist das wirklich der richtige Ansatz? (es funktioniert gut, von dem, was ich bis jetzt sehe)

question

Hilfreichster Kommentar

Ich denke, es kann eleganter gemacht werden.
Wie ich es mache:

import { createSelector } from 'reselect';

const providersSelector = state => state.entities.providers;
const subscribersSelector = state => state.entities.subscribers;

export const providersArraySelector = createSelector(
    [providersSelector],
    providers => Object.keys(providers).map(id => providers[id])
);

export const subscribersArraySelector = createSelector(
    [subscribersSelector],
    subscribers => Object.keys(subscribers).map(id => subscribers[id])
);

Alle 3 Kommentare

Ich denke, es kann eleganter gemacht werden.
Wie ich es mache:

import { createSelector } from 'reselect';

const providersSelector = state => state.entities.providers;
const subscribersSelector = state => state.entities.subscribers;

export const providersArraySelector = createSelector(
    [providersSelector],
    providers => Object.keys(providers).map(id => providers[id])
);

export const subscribersArraySelector = createSelector(
    [subscribersSelector],
    subscribers => Object.keys(subscribers).map(id => subscribers[id])
);

@itsmepetrov sieht viel besser aus ... danke.

Im Prinzip bin ich also auf dem richtigen Weg. Irgendwer anders?

Dann wollte ich die Entitäten in einer Ansicht auflisten, also musste ich sie zurück in ein Array analysieren.

Sie können ein Array von IDs behalten, wenn die Arbeit mit Arrays bequemer ist. Sie müssen dies für Dinge wie Paginierung tun. Das Beispiel real-world im Ordner examples macht das.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen