javascript - Firebase连接到集合，但按键过滤

Question

我正在使用 RN、firebase 和 redux-firebase

我的数据具有以下结构

{
  users: {
    user1: {
      name: 'John',
      companies: {
        company1: true,
        company2: true
        ....
      }
    }
  },
  companies: {
    company1: {
      name: 'Corp 1',
      members: {
        user1: true,
        ....
      }
    },
    company2: {},
    company3: {}
    ...
  }
}

我认为我已通过以下方式连接到 firebase:

const wrappedCompanies = firebaseConnect([
    { path: '/companies', queryParams: [ 'orderByChild=name' ]}
])(Companies)


const selector = (state, ownProps) => {
    let {companies} = state.firebase.data;
    return {
        companies: companies ? colToArr(companies) : [],
        loading: state.firebase.requesting.companies
    }
};

导出默认连接(选择器，actionCreators)(wrappedCompanies)

这为我提供了包含所有公司的集合，但我只想显示用户被分配到的公司(在本例中为 1 和 2)。

我知道如果我使用 componentDidMount 并在我的组件内直接调用 firebase 我会如何创建这样的请求，但是我想按顺序使用 redux-firebase不必在 componentWillMount 中调用。

Answer 1

你是对的 react-redux-firebase将有助于限制大量重复的 componentDidMount 代码。

语法将取决于您是否使用 v1.*.*或 v2.*.* (因为 v2.*.* 不使用 immutablejs)。下面是一些可能有助于您前进方向的示例，以及处理组件内加载的更常见模式。

v1.*.*语法:

import { isLoaded, populatedDataToJS, dataToJS } from 'react-redux-firebase'
const populates = [{ child: 'companies', root: 'companies'}]

const wrappedCompanies = firebaseConnect()(Companies)

const selector = (state, ownProps) => {
  const populatedProfile = populatedDataToJS(state.firebase, 'profile', populates)
  return {
    companies: populatedProfile.companies, // may throw error if no companies
    loading: !isLoaded(populatedProfile), // more commonly done in component
    auth: pathToJS(state.firebase, 'auth')
  }
};

v2.*.* 语法(下面更常见的模式):

import { isLoaded, populate } from 'react-redux-firebase'
const populates = [{ child: 'companies', root: 'companies'}]

const wrappedCompanies = firebaseConnect()(Companies)

const selector = (state, ownProps) => {
  const profile = populate(state.firebase, 'profile', populates)
  return {
    companies: profile.companies,
    loading: !isLoaded(state.firebase, profile),
    auth: state.firebase.auth
  };
};

更常见的组件模式:

import React from 'react'
import { isLoaded, isEmpty, populate } from 'react-redux-firebase'
const populates = [{ child: 'companies', root: 'companies'}]

const Companies = ({ profile }) => {
  if (!isLoaded(profile)) {
    return <div>Loading...</div>;
  }
  if (isEmpty(profile)) {
    return <div>No Profile</div>;
  }
  return (
   <div>
     <span>My Companies</span>
     {
       map(profile.companies, company => (
        // put your component code here
         <pre>{JSON.stringify(company, null, 2)}</pre>
       ))
     }
   </div> 
  );
}
const wrappedCompanies = firebaseConnect()(Companies);

const selector = ({ firebase }) => {
  return {
    profile: populate(firebase, 'profile', populates),
    auth: firebase.auth
  };
};

这种在组件内处理加载的模式是常规模式 used in the recipes within the docs .

免责声明:我是 react-redux-firebase 的作者