React-Redux-Firebase 新钩子答案

【问题标题】：React-Redux-Firebase new hooksReact-Redux-Firebase 新钩子
【发布时间】：2020-01-07 13:57:44
【问题描述】：

我已经设置了 redux 并做出了反应，它们运行良好。我现在想使用钩子 useFirestoreConnect 和 useFirestore() 将来自 firestore 的数据直接同步到 redux 状态。

此代码有效：

function BannerG() {

    const dispatch = useDispatch()
    // const banneAG = useSelector(state => state.banneAG)

    const firestore = useFirestore();
    useFirestoreConnect( props => [{collection : "layoutElements", doc: 'BannerG'}])
    const aa = useSelector(state  => state.firestore.data.layoutElements)
    console.log(aa)

在控制台中打印带有 {BannerG: {H1: blah, H2:Blah blah, …………}} 的对象

但如果我改为使用

function BannerG() {

    const dispatch = useDispatch()
    // const banneAG = useSelector(state => state.banneAG)

    const firestore = useFirestore();
    useFirestoreConnect( props => [{collection : "layoutElements", doc: 'BannerG'}])
    const aa = useSelector(state  => state.firestore.data.layoutElements.BannerG)
    console.log(aa)

当我运行时，返回一个错误，指出 BannerG 未定义。如果我尝试使用后一个，aa.BannerG.H1 也会出错

谁有办法解决这个问题？

【问题讨论】：

标签： reactjs firebase redux google-cloud-firestore react-redux-firebase

【解决方案1】：

我无法在任何参考资料中直接找到它，但只能在示例中找到。

似乎 useSelector 需要方括号，例如：

const aa = useSelector(state  => state.firestore.data.layoutElements['BannerG'])

我在示例github react-redux-firebase、react-redux 和react-redux-firebase.com reference 中发现了这样的情况。

很遗憾，我目前无法对其进行任何测试，所以请告诉我它是否有效。

【讨论】：