Firebaseを使用してデータを取得してWebアプリケーションに表示しようとしていますが、その方法はわかりません。私はreduxThunkを使用しています。 Imにエラーが発生しましたIDが定義されていません。 これは、これが、これが私のindex.jsあるReact-Redux - Firebaseからのデータの取得
アクション/ index.js
import Firebase from 'firebase';
import { FETCH_DATA } from './types';
const Data = new Firebase('https://portofoliofirebase.firebaseio.com');
export function fetchData(){
return dispatch => {
Data.on('value', snapshot => {
dispatch({
type: FETCH_DATA,
payload: snapshot.val()
});
});
}
}
私の行動である
trabalhos.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
class Trabalhos extends Component {
componentWillMount(){
this.props.fetchData();
}
renderList({id,tec,title}){
return(
<li className="list-group-item" key={id}>
<p>{title}</p>
<p>{tec}</p>
</li>
)
}
render(){
return (
<div>
<div className="trabalhos">
<div className="trabalhos_caixa">
<div className="row">
<div className="col-xs-12">
<ul className="no_pad">
{this.renderList()}
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state){
return { fetch: state.fetch };
}
export default connect(mapStateToProps, actions)(Trabalhos);
私のコンポーネントであります
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reducers from './reducers';
import routes from './routes';
import * as **firebase** from 'firebase';
import **reduxThunk** from 'redux-thunk'
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>
, document.querySelector('.container'));
は、これはこれは私のリデューサーであるindex.js
import { combineReducers } from 'redux';
import fetchReducer from './fetch_reducer';
const rootReducer = combineReducers({
fetch: fetchReducer
});
export default rootReducer;
Trabalhosコンポーネントはどのようにその小道具を設定していますか?あなたはそれが接続されたコンポーネントであることを意図していますか? –
私は更新しました! –
@Hseleiroそのエラーはどこから来ていますか?あなたのfirebaseアプリケーションは動作していますか?ドキュメントから、Firebaseがアクティブになる前にinitializeAppを実行する必要があるようです。また、 'firebase.database()。ref()'で '.on()'を呼び出して変更を待ち受けなければなりません。 firebaseのインスタンス上で '.on()'を直接呼び出すことはできません(下のリンクを参照)。 https://firebase.google.com/docs/reference/js/firebase https://firebase.google.com/docs/database/web/read-and-write – Shane