Обработка логики просмотра в сокращении

Question

Я нахожу, что мой mapStateToProps возрастает по сложности.

Например, через несколько связных компонент, я делаю что-то вроде этого:

const mapStateToProps = (state) => { 
    return { 
    activeAsset: state.assets.byId[state.assets.activeAssetId].attributes 
    } 
} 

Проблема № 1: Это довольно очевидно, что приведенный выше код может охраняться с некоторыми условными, так как activeAssetId не всегда задается, что приведет к тому, что выше будет ошибка.

Проблема № 2: Предположим, что я хотел бы получить в нескольких компонентов Теперь я должен дублировать код выше текущего activeAsset.

Я слышал о reselect, но я не совсем уверен, что это правильный выбор здесь, поскольку он, по-видимому, используется специально с memoized функциями.

Прошу извинить меня, если ответ достаточно очевиден, я довольно новичок в экосистеме redux.

Answer 1

Безопасное решение - использовать селектор. Селекторы являются многоразовыми функциями, которые знают форму состояния в хранилище и могут создавать производные данные.

В вашем случае, это может быть ваш селектор:

const getAssetAttributes = ({ assets }) => (assets.byId[state.assets.activeAssetId] && assets.byId[state.assets.activeAssetId].attributes) || null; // if the asset exists and has attributes return it, if not return null 

Использование:

const mapStateToProps = (state) => { 
    return { 
    activeAsset: getAssetAttributes(state) 
    } 
} 

Вы можете создавать селекторы для каждого полученных данных, и хранить их в файле соответствующего редуктора, или в отдельный файл selectors. Reselect может помочь вам в создании замеченных стандартных селекторов, но это не требуется. Повторно выбор селекторов вернет одни и те же данные, если параметры не изменились, и это предотвратит ненужные компоненты рендеринга.