firestoreConnect doesn't map collection to state in react-redux-firebase

Question

I'm trying to map my giveaways collection in firestore to my props in Shop.js, but firestoreConnect isn't doing anything. When I print out state.firestore.ordered in mapStateToProps I get Object{}, and state.firestore.ordered.giveaways is undefined.

Is there something wrong with my configuration? The react-redux-firebase documentation makes it look like everything's here.

Shop.js

    const giveaways = state.firestore.ordered.giveaways;
    console.log("=====================================================");
    console.log(giveaways);
    return {
        profile: state.firebase.profile,
        giveaways: state.firestore.ordered.giveaways
    }
}

export default compose (
    firestoreConnect(() =>{
        {collection: 'femaleClothes'}
    }),
    connect(mapStateToProps),
    )(Shop);

fbConfig.js looks like this

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


var firebaseConfig = { /*firebase config information*/};
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  //firebase.analytics();
  firebase.firestore();

  export default firebase;

and the relevant parts of App.js


const store = createStore(rootReducer, 
  compose(
      applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),
      reduxFirestore(fbConfig)
    )
  );


const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
}
export default function App() {
    return (
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <AuthIsLoaded>
            <NavigationContainer>
              <AuthNavigator/>
            </NavigationContainer> 
          </AuthIsLoaded>
        </ReactReduxFirebaseProvider>
      </Provider>
    );
};

Is it possible that it's supposed to be `state.firebase.ordered` instead of `state.firestore.ordered`? — Linda Paiste, Mar 08 '21 at 22:12

score 0 · Answer 1 · answered Apr 11 '21 at 02:33

I could not see error on your configuration. I had same problems recently and finally managed to solve. Here is mapStateToProps and exporting:

const mapStateToProps = (state) => {
  return {
    sections: state.firestore.ordered.sections,
    auth: state.firebase.auth
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect(
    [{collection: 'sections'}]
  )
)(ShowSection);

In order to use in your component:

//if it's functional component
//const section = props.section
//if it's class component (I mention it just in case)
const sections = this.props.sections
// in my render method, make sure the sections is fetched
{sections && sections.map( section =>{
     return <Template
     key={section.id} 
     title={section.title}
     icon="edit"
     link={`/section/${section.id}`}
     btnTxt="Rediger"
     info={section.info}
 ></Template>
 })}

I tried in another project also and the problem was as you mentioned: section.map() is not a function. It's because of the returning object. After this point just console.log your returning object. If it's an array this .map() method will work. But if's a JS object, .map or .forEach wont work. Instead of these methods you must iterate your object as follows:

//func component
const Overview = (props) => {
const sections = props.sections
return(
<div>
{sections && Object.entries(sections).map(section =>(
//items id
<h1>{section[0]}</h1>
//items keys (whatever you have in your collection's document's fields)
<h1>{section[1].title}</h1>
<h1>{section[1].info}</h1>
))}
</div>
)
}

But the problem with react-redux-firebase v.3.0.0, the documentation says that:

export default compose(
  firestoreConnect(() => ['todos']), // sync todos collection from Firestore into redux
  connect((state) => ({
    todosList: state.firestore.data.todos
  })
)(SomeComponent)

I want to highlight this: state.firestore.data.todos The older version was state.firestore.todos

I tried to explain the problem and the solution and I hope it helps.

firestoreConnect doesn't map collection to state in react-redux-firebase

1 Answers1

Linked