Redux: ์ •๊ทœํ™” ๋œ ์—”ํ„ฐํ‹ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ชจ๋ฒ” ์‚ฌ๋ก€?

์— ๋งŒ๋“  2015๋…„ 08์›” 19์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: reduxjs/redux

Redux๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ฒซ ๋ฒˆ์งธ ์•ฑ์—์„œ ๊ถŒ์žฅ๋Œ€๋กœ ๋‚ด ์ปฌ๋ ‰์…˜์„ ์ •๊ทœํ™”ํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด ํ•œ ๊ณณ์—์„œ ์—”ํ‹ฐํ‹ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. (์ด๊ฒƒ์€ ๋‚˜์—๊ฒŒ ์˜ณ๋‹ค๊ณ  ๋Š๋‚€๋‹ค)

์ฒ˜์Œ์—๋Š” ID๋ฅผ ํ‚ค๋กœ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋ฐฐ์—ด์„ ๋ฐฐ์—ด๊ณผ ์œ ์‚ฌํ•œ ์—”ํ‹ฐํ‹ฐ ๊ฐ์ฒด๋กœ ์„ฑ๊ณต์ ์œผ๋กœ ์ •๊ทœํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ทฐ์— ์—”ํ‹ฐํ‹ฐ๋ฅผ ๋‚˜์—ดํ•˜๊ณ  ์‹ถ์—ˆ์œผ๋ฏ€๋กœ ๋‹ค์‹œ ๋ฐฐ์—ด๋กœ ๊ตฌ๋ฌธ ๋ถ„์„ํ•ด์•ผํ–ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์—”ํ‹ฐํ‹ฐ๋ฅผ ํ•„ํ„ฐ๋งํ•˜๋ ค๋ฉด ์‹ค์ œ ์–ด๋ ˆ์ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์ •๋ง ์˜ฌ๋ฐ”๋ฅธ ์ ‘๊ทผ ๋ฐฉ์‹์ž…๋‹ˆ๊นŒ?

๋‹ค์‹œ ์„ ํƒํ•˜๋Š” ์˜ˆ :

    // 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)
     );

์ด๊ฒƒ์ด ์ •๋ง ์˜ฌ๋ฐ”๋ฅธ ์ ‘๊ทผ ๋ฐฉ์‹์ž…๋‹ˆ๊นŒ? (๋‚ด๊ฐ€ ๋ณธ ๊ฒƒ๋ถ€ํ„ฐ ์ง€๊ธˆ๊นŒ์ง€ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค)

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋” ์šฐ์•„ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
๋ฐฉ๋ฒ• :

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 ๋Š” ํ›จ์”ฌ ๋” ์ข‹์•„ ๋ณด์ธ๋‹ค ... thx.

๊ทธ๋ž˜์„œ ์›์น™์ ์œผ๋กœ ๋‚˜๋Š” ์˜ฌ๋ฐ”๋ฅธ ๊ธธ์„ ๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ?

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ทฐ์— ์—”ํ‹ฐํ‹ฐ๋ฅผ ๋‚˜์—ดํ•˜๊ณ  ์‹ถ์—ˆ์œผ๋ฏ€๋กœ ๋‹ค์‹œ ๋ฐฐ์—ด๋กœ ๊ตฌ๋ฌธ ๋ถ„์„ํ•ด์•ผํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ฐฐ์—ด ์ž‘์—…์ด ๋” ํŽธ๋ฆฌ ํ•  ๋•Œ ID ๋ฐฐ์—ด์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ๋งค๊น€๊ณผ ๊ฐ™์€ ์ž‘์—…์„ ์œ„ํ•ด์ด ์ž‘์—…์„ _ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค _. examples ํด๋”์˜ real-world ์˜ˆ์ œ๊ฐ€์ด๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰