CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-databasereduxreact-redux
Hugo Seleiro
Hugo Seleiro

Reputation: 2657

React - Redux - Integrate Firebase Database in my App

im making a simple portfolio using react, redux and redux-thunk.The Objective is to catch data from firebase and display it on my trabalhos.js component.

I don´t know how to pass the data to my component. Could some one help me ? thanks

Heres my action

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 my Reducer

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

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

return state;
}

Heres my rootReducer

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

const rootReducer = combineReducers({

fetch: fetchReducer

});

export default rootReducer;

Heres my trabalhos.js component

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

Thank You !

Upvotes: 1

Views: 368

Answers (1)

EQuimper
EQuimper

Reputation: 5929

First thing a good video for help you understand that just here

Now you have mapStateToProps on an object call fetch. Would be a better idea to change the name for something easier to follow like data etc. But this is a personal choice.

function mapStateToProps(state){

return { data: state.fetch };

}

Now you can access the props in the component like you did with everything. You use this.props.fetch or if you change the name this.props.data . I don't know what look like your data but a good thing to use is react dev tools so it's easy to see the props on each component.

The last thing would be to do the tutorial about redux here, this is free and an awesome resource from the creator of redux ;)

Hope that can help you.

Upvotes: 1

Related Questions