Π ΠΌΠΎΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Ρ Redux Ρ ΡΡΠ°ΡΠ°ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΌΠΎΠΈ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π±ΡΠ»ΠΈ Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡΠΌΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΡΠ½ΠΎΡΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. (ΡΡΠΎ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΌΠ½Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ)
Π‘Π½Π°ΡΠ°Π»Π° Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π» ΡΠ²ΠΎΠΉ ΠΌΠ°ΡΡΠΈΠ² Π΄Π°Π½Π½ΡΡ Π΄ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΠΈΠ²Ρ, Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠ»ΡΡΠ°
ΠΠ°ΡΠ΅ΠΌ Ρ Ρ ΠΎΡΠ΅Π» ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π² ΠΌΠ°ΡΡΠΈΠ². Π’Π°ΠΊΠΆΠ΅, Π΅ΡΠ»ΠΈ Ρ Ρ ΠΎΡΡ ΠΎΡΡΠΈΠ»ΡΡΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΡ, ΠΌΠ½Π΅ Π½ΡΠΆΠ΅Π½ Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΠΌΠ°ΡΡΠΈΠ². ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄?
ΠΡΠΈΠΌΠ΅Ρ Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ:
// 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)
);
ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄? (ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, ΠΈΠ· ΡΠΎΠ³ΠΎ, ΡΡΠΎ Ρ Π²ΠΈΠΆΡ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ)
ΠΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΡΡΠ½Π΅Π΅.
ΠΠ°ΠΊ Ρ ΡΡΠΎ Π΄Π΅Π»Π°Ρ:
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 Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅ ... ΡΠΏΠ°ΡΠΈΠ±ΠΎ.
Π’Π°ΠΊ ΡΡΠΎ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅ Ρ Π½Π° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΡΡΠΈ. ΠΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π΅ΡΠ΅?
ΠΠ°ΡΠ΅ΠΌ Ρ Ρ ΠΎΡΠ΅Π» ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π² ΠΌΠ°ΡΡΠΈΠ².
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ², ΠΊΠΎΠ³Π΄Π° Ρ ΠΌΠ°ΡΡΠΈΠ²Π°ΠΌΠΈ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠ°ΠΌ _ Π½ΡΠΆΠ½ΠΎ_ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ
Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΡΠ°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. real-world
ΠΏΡΠΈΠΌΠ΅Ρ Π² examples
ΠΏΠ°ΠΏΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΡΡΠ½Π΅Π΅.
ΠΠ°ΠΊ Ρ ΡΡΠΎ Π΄Π΅Π»Π°Ρ: