Hinzufügen von Routen zu einer React-/Firebase-App

Question

Mit dem Hinzufügen von React Routes zu einer React/Firebase-App wurde gerade begonnen. Ich hatte diesen Code, um die Daten zu lesen,

const fb = firebase 
.initializeApp(config) 
.database() 
.ref(); 

fb.on('value', snapshot => { 
    const store = snapshot.val(); 
    ReactDOM.render(
     <App {...store} /> 
    , 
    document.getElementById('root') 
); 
}); 

Dies korrekt gearbeitet, mit Echtzeit-Updates für die App. Ich begann dann mit Router zu spielen,

ReactDOM.render(
    <Router> 
    <Route path="/" component={App {...store}} /> 
    </Router> 
    , 
    document.getElementById('root') 
); 

Aber die {...} store gibt einen Fehler, unerwartetes Token. Soll ich den Firebase-Code tiefer in die App-Komponente verschieben oder gibt es einen anderen Weg?

Answer 1

uh die component= nimmt nicht das Ding, das Sie dort haben mit ReactDOM.render()

Wie haben Sie es jetzt: store undefined sein ... so gesetzt:

let store = {} // at the top

Wo Ist Ihre tatsächliche Komponente/Klasse definiert? sollten Sie auch nicht Creator Rendern basierend darauf, wenn Firebase angezeigt wird, sollten Sie zuerst rendern dann wenn Firebase angezeigt wird, können Sie den Status aktualisieren.

Es gibt also eine Menge, die hier behoben werden muss, bevor dies funktionieren kann.

Hier ist mein index.js:

auch feststellen, dass speichert das Ergebnis der configureStore ist (ich nehme an, Sie wollen Redux verwenden, wie Sie ein Geschäft haben) ...

import 'babel-polyfill' 
import React from 'react' 
import { render } from 'react-dom' 
import Root from './root/containers/Root' 
import './index.css' 
import configureStore from './root/store' 
import { syncHistoryWithStore } from 'react-router-redux' 
import { browserHistory } from 'react-router' 

const store = configureStore() 
const history = syncHistoryWithStore(browserHistory, store) 


render(
    <Root store={store} history={history} />, 
    document.getElementById('root') 
); 

Mein Speicher:

import { createStore, applyMiddleware } from 'redux' 
import thunkMiddleware from 'redux-thunk' 
import createLogger from 'redux-logger' 
import reducer from '../reducers' 
import { database, initializeApp } from 'firebase' 
import { firebaseConfig } from '../constants' 
initializeApp(firebaseConfig) 
export const rootRef = database().ref().child('/react') 
export const dateRef = rootRef.child('/date') 

export default function configureStore(preloadedState){ 
    const store = createStore(
    reducer, 
    preloadedState, 
    applyMiddleware(thunkMiddleware, createLogger()) 
) 
    return store 
} 

Und mein Root:

import React, { Component, PropTypes } from 'react' 
import { Provider } from 'react-redux' 
import routes from './routes' 
import { Router, } from 'react-router' 

class Root extends Component { 
    render() { 
    const { store, history } = this.props 
    return (
     <Provider store={store}> 
     <Router history={history} routes={routes} /> 
     </Provider> 
    ) 
    } 
} 

Root.propTypes = { 
    store: PropTypes.object.isRequired, 
    history: PropTypes.object.isRequired 
} 

einfachste Version, um loszulegen:

import React, { Component } from 'react' 
import { firebaseConfig } from '../constants' //this is a must otherwise you have multiple versions of firebase running around... 
initializeApp(firebaseConfig) 
export const rootRef = database().ref().child('/root') 

class App extends Component { 
componentDidMount(){ 
    initializeApp(firebaseConfig) 
    this.state = {store: {}} 

    rootRef.on('value', snapshot => { 
     this.setState({store: snapshot.val()}); 
    } 

} 
render(){ 
let { store } = this.state 
let childrenWithProps = React.Children 
.map(this.props.children, function(child) { 
     return React.cloneElement(child, { store: store }); 
}); 


return <div> 
{JSON.stringify(store)} 
{childrenWithProps} 
</div> 
} 

} 
const Routes = (<Route component={App}><Route component={Comp1} path='/earg'/><Route component={Comp2} path='/earg'/></Route>) 

render(Routes, document.getElementById('root')) 

Dies ist eine Menge Code ist, und Sie werden noch mehr brauchen diese in Gang zu bringen ... ich vielleicht ein Tutorial empfehlen würde ...

Answer 2

In Das Ende, für eine schnelle Lösung, habe ich eine anonyme Funktion verwendet, um die Komponente zu wickeln,

<Route path="/" component={() => (<App {...store} />)} />