Redux: 正規化されたエンティティを処理するためのベストプラクティス？

作成日 2015年08月19日 · 3コメント · ソース: reduxjs/redux

Reduxを使用した最初のアプリでは、コレクションを推奨どおりに正規化しておくようにしています。この方法では、エンティティを1か所で変更するだけで済みます。（これは私にとって正しいと感じます）

最初は、データの配列を、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

ソース

ms88privat

最も参考になるコメント

もっとエレガントにできると思います。
私のやり方：

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 2015年08月20日

👍3 👎1

全てのコメント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 2015年08月20日

👍3 👎1

@itsmepetrovは 'はるかに良く見えます... thx。

ですから、原則として私は正しい方向に進んでいます。他の誰か？

ms88privat 2015年08月20日

次に、エンティティをビューに一覧表示したかったので、解析して配列に戻す必要がありました。

配列の操作がより便利な場合は、IDの配列を保持できます。ページネーションなどの場合は、これを行う必要があります。 examplesフォルダーのreal-world例はそれを行います。

gaearon 2015年08月20日

👍2

このページは役に立ちましたか？

0 / 5 - 0 評価

Redux: 正規化されたエンティティを処理するためのベストプラクティス？

最も参考になるコメント

全てのコメント3件

関連する問題