CODEWITHSUNDEEP
reactjsreduxreact-reduxreact-redux-firebase
Madan Hegde
Madan Hegde

Reputation: 43

having trouble retrieving data from firestore "TypeError: this.store is undefined"

I have been trying to retrieve my data collection from firestore. but here is the issue

error goes like this

  import React, { Component } from 'react'
  import Notification from './Notification.js'
  import ProjectList from '../projects/ProjectList'
  import { connect } from 'react-redux'
  import { compose } from 'redux'
  import { firestoreConnect } from 'react-redux-firebase'

  class Dashboard extends Component {
    render() {
      //console.log(this.props)
      const { projects } = this.props
      return(
        <div className="dashboard container">
          <div className="row">
            <div className="col s12 m6">
              <ProjectList projects={projects}  />
            </div>
            <div className="col s12 m5 offset-m1">
              <Notification />
            </div>
          </div>
        </div>
      )
    }
  }

  export default compose(
    firestoreConnect(['projects']),
    connect((state) => ({
      projects: state.firestore.ordered.projects
    }))
  )(Dashboard)

this is my root reducer

  import authReducer from './authReducer'
  import projectReducer from './projectReducer'
  import { combineReducers } from 'redux'
  import { firestoreReducer } from 'redux-firestore'

  const rootReducer = combineReducers({
    auth: authReducer,
    project: projectReducer,
    firestore: firestoreReducer
  })

  export default rootReducer

my project reducer is like this

  const initState = {
    projects: [
      {id: '0', title: 'do some JavaScript', content: 'blah blah blah...'},
      {id: '1', title: 'grab some vegitables', content: 'blah blah blah...'},
      {id: '2', title: 'have a cup of coffee', content: 'blah blah blah...'}
    ]
  }

  const projectReducer = (state = initState, action) => {
    switch (action.type) {
      case 'CREATE_PROJECT':
            console.log('project is', action.project)
            return state
      case 'CREATE_PROJECT_ERR':
            console.log('create project error', action.err)
            return state
      default:
      return state
    }
  }

  export default projectReducer

action

  export const createProject = (project) => {
    return (dispatch, getState , { getFirebase, getFirestore }) => {
      // console.log('project: ', project)

      // adding data to firestore
      const firestore = getFirestore()
      firestore.collection('projects').add({
        ...project,
        authorFirstName: 'Herold',
        authorSecondName: 'Finch',
        authorId: 111,
        createdAt: new Date()
      }).then(() => {
        dispatch({type:'CREATE_PROJECT', project })
      }).catch((err) => {
        dispatch({type:'CREATE_PROJECT_ERR', err })
      })
    }
  }

when I was grabbing static data from this projectReducer it was all fine. But I'm not able to understand where I'm missing in retrieving data from the database. I tried downgrading react-redux-firebase, react-redux and still it doesn't work. Please help me fix this or I need to know if there's any other method I have to choose. Thanks in advance!

Upvotes: 1

Views: 585

Answers (2)

Ahmad Aroyehun
Ahmad Aroyehun

Reputation: 36

I had similar issue, mine was TypeError: Cannot read property 'firestore' of undefined, Try using a function as the arg in firestoreConnect instead; something like this firestoreConnect(() => [{ collection: 'projects' }])

export default compose(
    connect(mapStateToProps),
    firestoreConnect(() => [
       { collection: 'projects' }
    ])
)(Dashboard)

Upvotes: 0

varoons
varoons

Reputation: 3887

Where is the action creator for CREATE_PROJECT?

Upvotes: 0

Related Questions