Redux、Firebase、および反応ネイティブ：データを非同期に取得

Question

ReduxとFirebaseを使用してReact-nativeアプリを開発しています。私はReduxのストアにデータを非同期にし、派遣ポストデータをフェッチする必要がありますどのように

users: 
    user_uid: 
    my_posts: [ post_key1, post_key2 ] 

posts 
    post_key1: { post_details } 
    post_key2: { post_details } 

：それはのように見えるよう マイFirebaseデータベースは、非正規化されましたか？

私はFirebaseのメソッドの.on（ 'value'）と.once（ 'value'）について知っていますが、問題を生成することなく適切な非同期関数/サンクを書くことができません。

Answer 1

あなたは反応し、ネイティブnative-modules through react-native-firebaseまたはJS SDKのいずれかを使用するための例を使用して、Firebaseでthe v2.0.0 docs showをreduxを統合するreact-redux-firebaseを使用している場合。

あなたが示した構造では、populateを使用すると、ユーザーを読み込むときに簡単に投稿を読み込むことができます。

あなたはownerの下でポストオブジェクト上のユーザーuidを持っている場合は、あなたのような何かができる：

Home.js

import { compose } from 'redux' 
import { connect } from 'react-redux' 
import { firebaseConnect, populate } from 'react-redux-firebase' 

const populates = [ 
    { child: 'owner', root: 'users' } // replace owner with user object 
] 

const enhance = compose(
    firebaseConnect([ 
    // passing populates parameter also creates all necessary child queries 
    { path: 'posts', populates } 
    ]), 
    connect(({ firebase }) => ({ 
    // populate original from data within separate paths redux 
    posts: populate(firebase, 'posts', populates), 
    })) 
) 

const SomeComponent = ({ posts }) => <div>{JSON.stringify(posts, null, 2)}</div> 

export default enhance(SomeComponent) 

App.js

import { createStore, combineReducers, compose } from 'redux' 
import { connect } from 'react-redux' 
import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase' 
import firebase from 'firebase' 
import Home from './Home' // code above 

const firebaseConfig = {} // config from firebase console 

// react-redux-firebase config 
const rrfConfig = { 
    userProfile: 'users' // automatically manage profile 
} 

// initialize firebase instance 
firebase.initializeApp(config) // <- new to v2.*.* 

// Add reduxReduxFirebase enhancer when making store creator 
const createStoreWithFirebase = compose(
    reactReduxFirebase(firebase, rrfConfig) 
)(createStore) 

// Add Firebase to reducers 
const rootReducer = combineReducers({ 
    firebase: firebaseStateReducer 
}) 

// Create store with reducers and initial state 
const initialState = {} 
const store = createStoreWithFirebase(rootReducer, initialState) 

const App =() => (
    <Provider store={store}> 
    <Home /> 
    </Provider> 
); 
ReactDOM.render(<App/>, document.querySelector('#app'));