我正在使用 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
中调用。
最佳答案
你是对的 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
的作者
关于javascript - Firebase连接到集合,但按键过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45269275/