React - Redux - Integrate Firebase Database in my App

Question

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 !

EQuimper · Accepted Answer · 2016-12-15 18:32:34Z

1

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.

answered Dec 15, 2016 at 18:32

EQuimper

5,9298 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hugo Seleiro Over a year ago

thanks for the help ! If i console my action i can see the info that came from the database , so im getting the info in my reducer, now the difficult is to present that data on my component, im getting the error -- Uncaught TypeError: this.props.fetch.map is not a function(…) -- can you help me ?

EQuimper Over a year ago

Surely cause the data is not an array but more an object. You need to console.log the data and figure out the way to handle this type. Inside your component just console.log(this.props) and let me know which kind of data is

Collectives™ on Stack Overflow

React - Redux - Integrate Firebase Database in my App

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related