Ken Pham
Ken Pham

Reputation: 295

How to use Cloud Firestore with React Native and Redux?

I'm a newbie in React Native and trying to learn using Cloud Firestore.

Basically, I haven't figure it out the whole road map to follow when you want to use Cloud Firestore combined with authentication in React Native and Firebase

I've successfully added Firebase authentication into my app.

The data is a list of places created by the users. I store that in Redux store, and generate a FlatList on the screen.

The question now is how can I store each list made by user to the cloud? Like when the user login again, he/she can see the data he/she created. Do we also need to persist the data ?

I'd love to learn some articles, or a general instructions for the whole progress (no code is needed), like step 1 or what requirements, what states of the app we need to list out, etc.. so I can get my hand down to figure it by myself

Upvotes: 0

Views: 1141

Answers (1)

Marco Caldera
Marco Caldera

Reputation: 505

The official documentation of the Cloud Firestore is really useful.

Store something on the cloud Firestore is really easy. For example, if you write something like this:

const doc = await firebase
    .firestore()
    .collection('bucketName')
    .doc('docId')
    .get()
    .data()

you get the document with the id docId from the bucket bucketName. If the document and/or the bucket does not exist you simply got undefined.


Instead, if you write:

const docId = await firebase
    .firestore()
    .collection('bucketName')
    .add({
      name: "Marco",
      born: "1993"
    })

you get the id docId of a new document that has been added to the collection bucketName containing the object {...}.


No schema is needed. If you add a document to a bucket that does not exist, Firebase create the bucket and then add the document to it.


From React Native you need to trigger a function and call, for example, the code I provided above. With the returned value you can use redux, save the data into the store and use them around the application.

Upvotes: 2

Related Questions