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)
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.
Hilfreichster Kommentar
Ich denke, es kann eleganter gemacht werden.
Wie ich es mache: