React & Redux MapStateToProps

Question

我正在使用Redux构建一个用于状态管理的React应用程序。我的应用程序允许用户注册和购买订阅。我想在“我的帐户”页面中显示订阅的详细信息，并为尚未订阅的用户显示JOIN NOW行动号召。

当用户登录时，我调用数据库获取订阅集合广告，如果存在，则将其添加到存储中。

我正在使用下面的代码将我的状态映射到我的帐户页面中的属性，但当有人在没有订阅的情况下登录时，我一直收到错误'subscription.currentSubscription is NULL‘。然而，我需要映射来显示订阅用户的详细信息……

您是如何处理这种情况的？

谢谢

const mapStateToProps = ({ user, join, subscription }) => ({
    currentUser: user.currentUser,
    joinStage: join.joinStep,
    priceData: subscription.currentSubscription.priceData,
    subscriptionData: subscription.currentSubscription.subscriptionData,
});

Answer 1

为什么不像下面这样缩小subscription的范围呢？

const mapStateToProps = ({ user, join, subscription }) => ({
    currentUser: user.currentUser,
    joinStage: join.joinStep,
    subscription: subscription.currentSubscription
});

在你的代码逻辑中，在使用它之前只需检查subscription。

  const App = ({ subscription }) => {
    if (!subscription) return null
     
    return subscription.priceData
  }

Answer 2

如果subscription.currentSubscription为空或未定义，则在尝试更深入地访问状态时将抛出错误。

您可以使用可选的链接来防止空/未定义的访问：

const mapStateToProps = ({ user, join, subscription }) => ({
  currentUser: user.currentUser,
  joinStage: join.joinStep,
  priceData: subscription?.currentSubscription?.priceData,
  subscriptionData: subscription?.currentSubscription?.subscriptionData,
});

或者使用更传统的null检查/保护子句：

const mapStateToProps = ({ user, join, subscription }) => ({
  currentUser: user.currentUser,
  joinStage: join.joinStep,
  priceData: subscription
    && subscription.currentSubscription
    && subscription.currentSubscription.priceData,
  subscriptionData: subscription
    && subscription.currentSubscription
    && subscription.currentSubscription.subscriptionData,
});

其中有些是多余的，所以您可以在返回映射状态之前进行检查。

const mapStateToProps = ({ user, join, subscription }) => {
  const {
    priceData,
    subscriptionData,
  } = subscription?.currentSubscription || {};

  return {
    currentUser: user.currentUser,
    joinStage: join.joinStep,
    priceData,
    subscriptionData,
  }
};