將路線添加到React/Firebase應用程序

剛開始將React路線添加到React/Firebase應用程序。我有這個代碼來讀取數據，將路線添加到React/Firebase應用程序

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

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

這工作正常，實時更新到應用程序。然後我開始與路由器玩，

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

但{...}店給出了一個錯誤，意外的標記。我是否應該將Firebase代碼降低到應用程序組件或者有其他方法？

來源

2017-01-17 Ian Morton

呃component=不走，你跟ReactDOM.render()

當你擁有了它，現在有沒有那個東西：店將是不確定的......所以設置：

let store = {} // at the top

在哪裏是你的實際組件/類定義？也不應該根據Firebase何時顯示您應該先渲染然後當Firebase顯示您可以更新狀態時創建者渲染。

所以有很多事情需要在這裏解決之前解決。

這裏是我的index.js：

還注意到，商店是configureStore的結果（我假設你想使用Redux的你有一店）...

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

我的店：

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 
}

我的根：

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 
}

最簡單上手：

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

這是一個很大的代碼，你需要更得到這個打算......我建議一個教程或許......

來源

2017-01-17 19:04:33 Zargold

是的，只是在這裏學習。代碼被剪切並粘貼錯誤。第一個版本工作正常，但我關於渲染順序的觀點。我的問題更多的是在哪裏參考商店。 –

我是否正確，您的意思是從react-redux/redux的Provider商店中存儲？或者你是什麼意思的商店，你只是喜歡所有的數據在一個名爲商店沒有Redux的對象？ – Zargold

是的，在我開始學習redux之前，我只是使用Firebase進行快速測試。在這種情況下，「商店」是指Firebase數據庫。數據在添加路由之前實時通過。 –

在最後，爲了快速解決，我用一個匿名函數來包裝組件，

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

來源

2017-01-18 08:13:55

將路線添加到React/Firebase應用程序

回答

相關問題