使用 react-redux-firebase 将组件连接到 redux 时选择 firestore 子集合答案

【问题标题】：Choose firestore subcollection when connecting component to redux with react-redux-firebase使用 react-redux-firebase 将组件连接到 redux 时选择 firestore 子集合
【发布时间】：2019-02-16 19:06:38
【问题描述】：

我正在使用react-redux-firebase 的fireStoreConnect() 中间件与我的 react-native 移动应用程序中的一个屏幕。在将组件连接到 redux 商店时，我想指定我连接到的 firestore 子集合，这取决于正在导航应用程序的用户。

我应该如何指定firestoreConnect 中的集合？用户 id 在 redux 存储中。

MWE：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase';

class PhotosScreen extends Component {
  render() {
    return (
      <View>
        <Text> i plan the use this.props.images here </Text>
      </View>
    );
  }
}

const mapStateToProps = (state) => {

    // reference the subcollection of the user
    const images = state.firestore.data.images;

    return {
        images: images,
    }
}

export default compose(
    firestoreConnect([
        {
            collection: 'users',
            doc: "HOW DO I GET THE USERS ID HERE? IT IS IN REDUX STORE",
            subcollections: [{ collection: 'images' }]
        }
    ]),
    connect(mapStateToProps),
)(PhotosScreen)

【问题讨论】：

你使用的是什么版本的react-redux-firebase？

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

【解决方案1】：

Firestore（和所有 NoSQL 数据库）遵循交替的“（父） 集合/文档/集合/文档...”分层模式。要将 React 组件同步到父 firestore 集合下的子集合和文档，您需要将子集合/子文档层次结构信息作为道具传递给 firestoreConnect。

    import React, { Component } from 'react';
    import { View, Text } from 'react-native';
    import { compose } from 'redux';
    import { connect } from 'react-redux'
    import { firestoreConnect } from 'react-redux-firebase';

    class PhotosScreen extends Component {
      render() {
        return (
          <View>
            <Text> i plan the use this.props.images here </Text>
            {images && images.length ? <div> render your images here using this.props.images and images.map </div> : <p>No images</p>}
          </View>
        );
      }
    }

    const mapStateToProps = (state) => {

   
        return {
            images  : state.firestore.data.images, // reference the subcollection of the user
            userId  : state.firestore.auth.uid     // assuming the 'doc id' is the same as the user's uid
        }                                          
    }

    export default compose(
        firestoreConnect((props) => 

            if (!props.userId) return []                 // sync only if the userId is available (in this case, if they are authenticated)
            return [
                {
                   collection     : 'users',             // parent collection
                   doc            : props.userId,        // sub-document
                   subcollections : [
                          {collection : 'images'}        // sub-collection
                   ],
                   storeAs        : 'images'
                }
             ]
        }),
        connect(mapStateToProps),
    )(PhotosScreen)

【讨论】：

【解决方案2】：

在 1.x 中

const enhance = compose(
  connect(
    (state) => ({
      someKey: state.someData
    })
  ),
  firebaseConnect(
    (props, firebaseInstance) => [
      { path: `${props.someKey}/someData` }
    ]
  )
)

在 2.x 中

firebaseConnect(
  (props, store) => [
    { path: `${store.getState().someKey}/someData` }
  ]
)

注意firebaseConnect 中的第二个参数如何从 firebaseInstance 更改为 store 从 v1 到 v2。

这应该可以满足您的需求。

【讨论】：

我使用的是firestoreConnect()而不是firebaseConnect()