Redux: Π›ΡƒΡ‡ΡˆΠ°Ρ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… сущностСй?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 19 Π°Π²Π³. 2015  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: reduxjs/redux

Π’ ΠΌΠΎΠ΅ΠΌ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ с 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])
);

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΡƒΠΌΠ°ΡŽ, это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изящнСС.
Как я это дСлаю:

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 ΠΏΠ°ΠΏΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ‚ это.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ