Redux, Firebase und reactive native: Daten asynchron abrufen

Question

Ich entwickle eine React-native App mit Redux und Firebase. My Firebase-Datenbank denormalized, so dass es wie folgt aussieht:

users: 
    user_uid: 
    my_posts: [ post_key1, post_key2 ] 

posts 
    post_key1: { post_details } 
    post_key2: { post_details } 

Wie soll ich Daten abrufen asynchron und Versand Beiträge Daten zu Redux store?

Ich weiß über Firebase Methoden .on ('Wert') und .once ('Wert'), aber ich bin nicht in der Lage, eine richtige asynchrone Funktion/Thunk ohne Probleme zu generieren schreiben.

Answer 1

Wenn Sie react-redux-firebase verwenden zu integrieren redux mit Firebase, the v2.0.0 docs show mit reagieren-native mit Beispielen für die Verwendung von entweder native-modules through react-native-firebase oder JS SDK.

Mit der Struktur, die Sie gezeigt haben, kann es auch hilfreich für Sie sein, populate zu verwenden, um Posts einfach automatisch zu laden, wenn Benutzer geladen werden.

Wenn Sie die Benutzer uid auf dem Post-Objekt unter owner haben, könnten Sie so etwas wie:

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'));