CODEWITHSUNDEEP
reactjsfirebasereact-redux-firebaseredux-firestore
Nishant Jalan
Nishant Jalan

Reputation: 1038

React-Redux cannot fetch my collection in Firestore

I am new to Redux and firebase and I have 2 documents under projects collection. However, I am unable to retrieve those collections. Here is my code,

fbConfig.js:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
    ... // This is correct!
};
firebase.initializeApp(firebaseConfig);
firebase.firestore();

export default firebase;

Component class (Dashboard.js):

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {firestoreConnect} from 'react-redux-firebase';
import {compose} from 'redux';

class Dashboard extends Component {
    render() {
        const {projects} = this.props;
        ...
    }
}

const mapStateToProps = state => {
    console.log(state);
    return {projects: state.firestore.ordered.projects};
};

export default compose(
    connect(mapStateToProps),
    firestoreConnect(() => ['projects'])
)(Dashboard);

Here is my rootReducer.js:

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;

When I run the react project, It does not show any data. When I open the console, I see that state.firestore.ordered is an empty object, as well as state.firestore.data. Where am I going wrong?

EDIT 1:

Attaching my code for projectReducer.js:

const initState = {
    projects: [
        {id: 1, title: 'blah 1', content: 'blah blah 1'},
        {id: 2, title: 'blah 2', content: 'blah blah 2'},
        {id: 3, title: 'blah 3', content: 'blah blah 3'},
    ]
 }

const projectReducer = (state = initState, action) => {
    switch(action.type) {
        case 'ADD_PROJECT':
            console.log('Created project', action.project);
            break;
        
        case addProjectError:
            console.log('Error on creating project', action.error);
            break;
         default:
            break;
    } 
    return state;
};
export default projectReducer;

Upvotes: 0

Views: 249

Answers (1)

Sergei Sevriugin
Sergei Sevriugin

Reputation: 498

Thy to check middleware in store definition. There is store index.js in my case that works with Firebase Firestore:

import forbiddenValuesMiddleware from '../middleware/index'
import createSagaMiddleware from 'redux-saga'
import apiSaga from '../sagas/api-saga'
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { reducer } from '../reducers/index'
import { DATA_LOADED } from '../constants/action-types'
import { getFirebase, actionTypes as rrfActionTypes } from 'react-redux-firebase'
import { constants as rfConstants } from 'redux-firestore'

const initialiseSagaMiddleware = createSagaMiddleware()

const extraArgument = {
  getFirebase
}

const middleware = [
  ...getDefaultMiddleware({
    serializableCheck: {
      // Ignore these action types
      ignoredActions: [DATA_LOADED,
        // just ignore every redux-firebase and react-redux-firebase action type
        ...Object.keys(rfConstants.actionTypes).map(
          type => `${rfConstants.actionsPrefix}/${type}`
        ),
        ...Object.keys(rrfActionTypes).map(
          type => `@@reactReduxFirebase/${type}`
        )
      ],
      // Ignore these field paths in all actions
      ignoredActionPaths: [],
      // Ignore these paths in the state
      ignoredPaths: ['remoteArticles', 'firebase', 'firestore']
    },
    thunk: {
      extraArgument
    }
  }),
  forbiddenValuesMiddleware,
  initialiseSagaMiddleware
];

const store = configureStore({
  reducer,
  middleware,
});

console.log(store.getState());

initialiseSagaMiddleware.run(apiSaga)

export default store;

Upvotes: 0

Related Questions