ルックアップ

Question

のは、私は以下の状態を持っているとしましょう：

state = { 
    products: { 
    50: { 
     sku: "000", 
     name: "A Product", 
     category: 123, 
     ... 
    } 
    }, 
    categories: { 
    123: { 
     name: "Some Category", 
     parentCategory: 100, 
     department: "Electronics" 
    } 
    }, 
    filteredProducts: [50] 
} 

私はカテゴリに基づいた製品をフィルタリングすることができるようにしたいです。しかし、カテゴリの複数のプロパティに基づいてフィルタリングする必要があります。つまり、エレクトロニクス部門内のすべてのカテゴリを取得したい場合や、IDが123のカテゴリをすべてサブカテゴリにしたい場合があります。

これは私が達成しようとしているものとよく似ているが、ちょっと分かりやすいので、私に負担してください。私は、この特定の例では、おそらく再選択のようなものを使用することができますが、製品減速機のカテゴリルックアップを行う必要があると仮定すると、私の選択肢は何ですか？

Answer 1

あなたが述べたようにreselectを使用して、パラメータを使用して、いくつかのセレクタは次のように製品のカテゴリからこれらのセレクタを再使用することができます：

次のようにあなたのcategory/selectorsファイル作成します：

import { createSelector } from 'reselect'; 

const categoriesSelector = state => state.categories; 

const selectCategoryById = id => { 
    return createSelector(
    categoriesSelector, 
    categories => categories[id] 
); 
} 

const selectCategoryByName = name => { 
    return createSelector(
    categoriesSelector, 
    categories => categories.filter(c => c.name === name) 
); 
} 

export default { 
    categoriesSelector, 
    selectCategoryById, 
    selectCategoryByName, 
} 

を

：

はまた、product/selectorであなたは以下の通りカテゴリと製品セレクタファイルの両方をインポートすることができます

import { createSelector } from 'reselect'; 
import { selectCategoryById } from './category/selectors'; 

const productsSelector = state => state.products; 

const selectProductByCategoryId = id => { 
    return createSelector(
    productsSelector, 
    selectCategoryById, 
    (products, categories) => products.filter(p.category.indexOf(id) > -1) 
); 
} 

export default { 
    productsSelector, 
    selectProductByCategoryId, 
} 

product/reducerでは、両方のセレクタをインポートして、カテゴリロジックに基づいて新しい変更状態を返すことができます。