Смотри окна в Redux Редукторы

Question

Допустим, у меня есть следующее состояние:

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

Я хочу, чтобы иметь возможность фильтровать продукты на основе категорий. Однако мне нужно отфильтровать на основе нескольких свойств категорий. т. е. я могу захотеть получить все категории в отделе электроники, или я, возможно, захочу получить категорию с идентификатором 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 вы можете импортировать оба селектора и возвращать новое измененное состояние на основе логики категории.