Как избежать использования логического оператора && в mapStateToProps в Redux

Question

Когда я выбираю вложенное состояние в селекторе, мне приходится прибегать к использованию && логических операторов

const mapStateToProps = store => ({
  image: store.auth.user && store.auth.user.photoURL;
});

Если он не используется, это нарушает работу приложения, поскольку данные поступают из сетевого запроса, и для их отображения требуется секунда.

TypeError: Cannot read property 'photoURL' of null

Есть ли лучший способ сделать это, или я должен использовать && везде? Это выглядит грязно и кажется хакерским.

Answer 1

Вы можете использовать ? оператор

image: store.auth.user ? store.auth.user.photoURL : undefined

или вы можете использовать ||

image:  ( store.auth.user || {} ).photoURL

Есть реквизит для опциональная цепочка в JS ?

var street = user.address?.street

Answer 2

Что-то вроде

const mapStateToProps = ({ auth }) => ({ image: auth.user ? auth.user.photoURL : null });

Есть также оператор || (/*...*/ image: (auth.user || {}).photoURL), но он будет на виду у зрителя, если он менее хакерский.

И если вам нужно сделать это более чем в одном месте, вы всегда можете использовать такую ​​библиотеку, как lodash, или просто реализовать версию _.get.