如何在React组件中访问嵌套的Redux状态？

Question

从州的分支机构访问嵌套数据的有效/优雅方式是什么？这些数据仅在部分时间可用？

我是React的新手，这个问题不断出现。我对Redux的掌握很好，并且使用了像Thunk＆amp; amp; Saga是API的东西，但我仍然不理解编写组件的正确方法，这样他们就不会试图抓住不存在的状态。

例如，在用户登录后将用户的个人资料照片加载到标题中时，该URL将在redux商店中显示为state.user.userData.photos.primary ...如果我尝试当用户没有登录时访问该位置，userData仍未定义，React将抛出错误。所以我的解决方案就是编写如下的作业：

let profilePhoto = props.user.userData ? props.user.userData.photos.primary : '';

...这看起来既麻烦又低效，特别是因为它只需要为了访问一小块数据而映射mapStateToProps中的整个userData对象。

我希望我能早点定位它。例如，在mapStateToProps中：

profilePhoto : state.user.userData.photos.primary || '';

...但这会导致无法访问照片＆＃39;未定义＆＃34;。那么，从州的分支机构访问嵌套数据的有效/优雅方式是什么？这些数据只在部分时间可用？

Answer 1

在你的mapStateToProps中访问你的状态：

profilePhoto : state.user.userData ? state.user.userData.photos.primary : ''

然后使用profilePhoto作为道具。这不会引发未定义的错误。

Answer 2

在我当前的应用程序中，我使用我将使用的所有数据树初始化redux状态;所以我不太可能最终得到undefined s。

所以解决方案是：

const initialState = {
    userData: {
        photos: {
            primary: ""
        }
    }
}

第一眼看上去可能看起来很难看，但它可以帮助我跟踪数据的样子，并可以通过单独定义对象的部分来简化。

替代方法可能是将一个标志保持在redux状态，如isUserPrimaryPhotoDefined，当您设置主变量时，您将设置为true;所以你可以使用三元组中的旗帜。但是，这可能无法保证完全消除可能的错误。

Answer 3

使用ES6 Destructuring Assignment，您可以以更简洁的方式从道具访问嵌套键。

const { user: { userData: { photos: { primary = ''} = {}} = {}} = {}} = props;
console.log(primary); // prints primary value or '' if not defined