Using firestore and typescript

[slash-dev]

Hi, not sure this is the best place to ask this but I thought a bug report was not appropriate.

I'm a bit lost with the doc, I found some doc/examples how to use firestore and some other doc/examples to use typescript but not the combination of both.

I created a new project and couldn't manage to make it work. I'm new to redux and a beginner at react so it might be a stupid question.

You can find the full implementation at: https://github.com/slash-dev/my-quick-list-v2/tree/main

I created the following component:

function RecipesList() {
  useFirestoreConnect([
    { collection: 'recipes', where: ['group', '==', '1'] }
  ]);
  // Replacing by state.firestore doesn't compile.
  const recipes = useSelector((state: RootState) => state.firebase.ordered.recipes);
  if (!isLoaded(recipes)) {
    return <CircularProgress />
  }
  if (isEmpty(recipes)) {
    return <p>Recipes list is empty</p>
  }

  return <div>
    {recipes
      .map(({ value: recipe, key }) => (
        <p key={`${key}`} >{recipe.title}</p>
      ))}
  </div>
}

Interestingly, this just loads forever and I get the following 2 errors in the console:

No reducer provided for key "firestore"

Even though I think I actually did it with:

...
export interface RootState {
  firebase: FirebaseReducer.Reducer<UserProfile, Schema>
  firestore: FirestoreReducer.Reducer
}

export const rootReducer = combineReducers<RootState>({
  firebase: firebaseReducer,
  firestore: firestoreReducer
})

Full file: https://github.com/slash-dev/my-quick-list-v2/blob/main/src/Model/reducer.ts

I also get the following error:

Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

Even though I actually gave read access to everyone:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /recipes/{document=**} {
      allow read, delete: if true;
      allow write: if false;
      allow create: if false;
    }
  }
}

I also found in the example that instead of using:

const recipes = useSelector((state: RootState) => state.firebase.ordered.recipes);

I should use state.firestore instead. Though this doesn't even compile and if I add a "// @ts-ignore" comment, it just fails because it firestore is undefined.

Also, I'm confused beacuse for firebase, there is a template parameter to specify the Schema though it looks like it doesn't exists for firestore?

Thank you in advance for your answer! Please let me know if you need anything.
Adrien

[slash-dev]

So, after some time digging, I figured that I had to use the connect/compose functions and it ended up working.

Here is an almost minimal sandbox with the working result: https://codesandbox.io/s/react-redux-firebase-3qpc1

[slash-dev]

Oh and after more digging, I realized, that everything works fine but if I use "firestoreReducer" from 'react-redux-firebase', everything fails. Is this expected?