如何避免在 Redux 的 mapStateToProps 中使用 && 逻辑运算符答案

【问题标题】：How do I avoid using the && logical operator in mapStateToProps in Redux如何避免在 Redux 的 mapStateToProps 中使用 && 逻辑运算符
【发布时间】：2019-04-05 18:31:59
【问题描述】：

当我在选择器中选择嵌套状态时，我不得不求助于使用&& 逻辑运算符

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

不使用它会破坏应用程序，因为数据来自网络请求并且需要一秒钟才能显示出来。

TypeError: Cannot read property 'photoURL' of null

有没有更好的方法来做到这一点，还是我应该在任何地方都使用 &&？它看起来很乱，感觉很hacky。

【问题讨论】：

三元？或者，如果您愿意使用外部库，lodash get 可以相对优雅地实现这一点。
谢谢。 _get 看起来不错。那么只是为了确认逻辑运算符和三元组是执行此操作的标准方法吗？
foo ? foo.bar : undefined 与foo && foo.bar 相比，是否更加凌乱或笨拙？您将如何更好地衡量？
我不认为它更好。我会坚持我的&&。我想我真正要问的问题是这样做是否有什么问题，但似乎每个人都这样做。
可选链接看起来很棒，但更好的是它更清晰并且使用的字符更少。

标签： javascript reactjs redux react-redux logical-operators

【解决方案1】：

你可以使用?操作符

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

或者你可以使用||

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

在 JS ? 中有一个 optional chaining 的propsal

var street = user.address?.street

【讨论】：

谢谢。确认一下，逻辑运算符和三元组是执行此操作的标准方法吗？
@JoshPittman 可选链目前仍然是stage 1，你可以使用babel-plugin，但是三元和逻辑运算符是标准的

【解决方案2】：

类似

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

还有 || 运算符 (/*...*/ image: (auth.user || {}).photoURL)，但如果不那么老套的话，它就在旁观者的眼中。

如果您需要在多个地方执行此操作，您始终可以使用 lodash 之类的库，或者只实现 _.get 的一个版本。

【讨论】：

谢谢。需要明确的是，逻辑运算符和三元组是执行此操作的标准方法？