CODEWITHSUNDEEP
javascriptreactjsfirebasereact-nativefirebase-realtime-database
Tinni C
Tinni C

Reputation: 7

Can't save or fetch data from Firebase (New to React Native & Firebase)

So I have a diary app that I am trying to code in React Native. I am new to react but everything I read says that what I am doing should just work. Basically, I am taking some data into an redux Action class and trying to write it. But I keep getting,

undefined is not an object "evaluating '_firebase2.default.database.ref')

I have gone over the "save new data to firebase" section on the tutorial I am using multiple times and I just don't get what I am doing wrong. Here is my code,

import firebase from 'firebase';
import { Actions } from 'react-native-router-flux';
import { DIARY_UPDATE, DIARY_SAVED, DIARY_FETCH_SUCCESS } from './types';


export const diaryUpdate = ({ prop, value }) => ({
    type: DIARY_UPDATE,
    payload: { prop, value }
  });

export const diarySave = ({ date, location, activity, satisfaction,
  amenities, note }) => {
    const { currentUser } = firebase.auth();

    return (dispatch) => {
      firebase.datebase.ref(`Users/${currentUser.uid}/diary`)
      .push({ date, location, activity, satisfaction, amenities, note })
      .then(() => {
          dispatch({ type: DIARY_SAVED });
          Actions.dashboard({ type: 'Replace' });
      });
    };
  };

  export const diaryFetch = () => {
      const { currentUser } = firebase.auth();

      return (dispatch) => {
        firebase.datebase.ref(`Users/${currentUser.uid}/diary`)
        .on('value', snapshot => {
          dispatch({ type: DIARY_FETCH_SUCCESS, payload: snapshot.val() });
        });
      };
    };

I have console log the values to check that nothing is wrong with the stuff being passed.

Here is the App.js where I am initialising firebase. I should mention the authentication function of the firebase is working fine!

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import reduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Router from './src/Router';

export default class App extends Component {

  componentWillMount() {
    if (!firebase.apps.length) {
      const fconfig = {
        apiKey: 'AIzaSyAkYD2TodRFEiln8JZPp2DtDyfIwIr654U',
        authDomain: 'yourhappyplace-6c049.firebaseapp.com',
        databaseURL: 'https://yourhappyplace-6c049.firebaseio.com',
        projectId: 'yourhappyplace-6c049',
        storageBucket: 'yourhappyplace-6c049.appspot.com',
        messagingSenderId: '634967086167'
      };
      firebase.initializeApp(fconfig);
    }
  }

  render() {
    //Create redux store with redux thunk middleware
    const happyStore = createStore(reducers, {}, applyMiddleware(reduxThunk));

    return (
      <Provider store={happyStore}>
          <Router />
      </Provider>
    );
  }
}

Can anyone see what the heck I am doing wrong? Thanks!

Upvotes: 0

Views: 622

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598837

To access the FirebaseDatabase instance you call the database() method on the FirebaseApp instance.

So spelled database() and with parenthesis:

firebase.database().ref(...)

Upvotes: 1

Related Questions