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)
);
์ด๊ฒ์ด ์ ๋ง ์ฌ๋ฐ๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ๋๊น? (๋ด๊ฐ ๋ณธ ๊ฒ๋ถํฐ ์ง๊ธ๊น์ง ์ ์๋ํฉ๋๋ค)
๋ ์ฐ์ํ๊ฒ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ฐฉ๋ฒ :
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
์์ ๊ฐ์ด๋ฅผ ์ํํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ ์ฐ์ํ๊ฒ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ฐฉ๋ฒ :