Reagieren - Redux - Integrieren Firebase-Datenbank in meiner App

Question

im ein einfaches Portfolio machen mit reagieren, redux und -redux thunk .Das Ziel ist, Daten von Feuerbasis zu fangen und es auf meinem trabalhos.js anzuzeigen Komponente.

Ich weiß nicht, wie Sie die Daten an meine Komponente weitergeben. Könnte mir jemand helfen? Dank

Heres meine Aktion

import Firebase from 'firebase'; 
import { FETCH_DATA } from './types'; 

var firebase = require("firebase/app"); 
require("firebase/database"); 

var config = { 
    apiKey: "AIzaSyDi3f9pSGH833Hq3TBzibCK1SbPOheiGmE", 
    authDomain: "portofoliofirebase.firebaseapp.com", 
    databaseURL: "https://portofoliofirebase.firebaseio.com", 
    storageBucket: "portofoliofirebase.appspot.com", 
    messagingSenderId: "656734450041" 
}; 

firebase.initializeApp(config); 

var data = firebase.database().ref(); 

export function fetchData(){ 
return dispatch => { 
    data.on('value', snapshot => { 
     dispatch({ 
      type: FETCH_DATA, 
      payload: snapshot.val() 
     }); 
    }); 
}; 
} 

Heres meine Reducer

import { FETCH_DATA } from '../actions/types'; 

export default function(state = {}, action) { 
switch(action.type){ 
    case FETCH_DATA: 
     return action.payload;  
} 

return state; 
} 

Heres mein rootReducer

import { combineReducers } from 'redux'; 
import fetchReducer from './fetch_reducer'; 

const rootReducer = combineReducers({ 

fetch: fetchReducer 

}); 

export default rootReducer; 

Heres meine trabalhos.js Komponente

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions'; 


class Trabalhos extends Component { 

    componentWillMount(){ 
     this.props.fetchData(); 
    } 

    renderList(){ 

     return(
      <li> 

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

Vielen Dank!

Answer 1

Das erste, was ein gutes Video um Hilfe Sie verstehen, dass nur here

Jetzt holen Sie mapStateToProps auf ein Objekt Anruf haben. Wäre eine bessere Idee, den Namen für etwas leichter zu ändern, wie Daten usw. zu ändern. Aber das ist eine persönliche Entscheidung.

function mapStateToProps(state){ 

return { data: state.fetch }; 

} 

Jetzt können Sie auf die Requisiten in der Komponente zugreifen, wie Sie mit allem getan haben. Sie verwenden this.props.fetch oder wenn Sie den Namen this.props.data ändern. Ich weiß nicht, wie Ihre Daten aussehen, aber eine gute Sache zu verwenden ist, reagiert dev tools so ist es einfach, die Requisiten auf jeder Komponente zu sehen.

Das letzte, was das Tutorial über redux here zu tun wäre, dies ist kostenlos und eine wunderbare Ressource von dem Schöpfer von redux;)

Hoffnung, die Ihnen helfen kann.