reactjs - React-native aplication database reads optimization

Question

I am building a react-native application with React-Native and Firebase firestore. I've got a feed where posts are shown, and a screen for each post with more details. The problem is, on the feed posts are shown, and when you go to each post screen, everytime the specific post is read. If you go back and then come again to the post screen, it's read again.

I thought a way of optimizing the database reads for this is to simply create a Redux action to fetch all posts and keep them in store. But I am faced with a challenge.

When I normally fetch them without Redux, I am using props to do it. When you go to a specific post screen, I fetch the post data where props.route.params.postId == firebase id. I couldn't find a way to replicate this with Redux.

Anyone has any idea over how this could be done?

EDIT:

In feed page, I'm fetching all posts

firebase.firestore()
                .collection('allPosts')
                .get()
                .then((snapshot) => {
                    let postsData = snapshot.docs.map(doc => {
                        const data = doc.data();
                        const id = doc.id;
                        return { id, ...data }
                    })
                    setAllPosts(postsData)
                })

Then I map through each, display some info about them and let the user navigate with props to a different screen with more info about post.

<TouchableOpacity 
              onPress={() => props.navigation.navigate('Post', { postId: item.id)}>
                  <Text>{item.name}</Text>
                        
                  <Image
                      style={styles.media}
                      source={{ uri: item.media }}
                   />
   </TouchableOpacity>

And in Post Screen I have the following fetch

firebase.firestore()
            .collection("allPosts")
            .where(firebase.firestore.FieldPath.documentId(), '==', props.route.params.postId)
            .get()
            .then((snapshot) => {
                let post = snapshot.docs.map(doc => {
                    const data = doc.data();
                    const id = doc.id;
                    return { id,...data }
                })
                setPost(post)
                
     })

As I said above, I couldn't find a way to make Redux work for this(keep all posts data in store and let me access it for each specific post)

标签： reactjsfirebasereact-nativereduxgoogle-cloud-firestore

Answer 1

You could also just store the posts directly to local storage:

firebase
  .firestore()
  .collection("allPosts")
  .get()
  .then((snapshot) => {
    let postsData = snapshot.docs.map((doc) => {
      const data = doc.data();
      const id = doc.id;
      return { id, ...data };
    });
    setAllPosts(postsData);
    localStorage.setItem("allPosts", Json.stringify(postsData));
  });

And later read it directly from there with:

const allPosts = JSON.parse(localStorage.getItem("allPosts"));

If you can't find the data in allPosts make a call to get it from database. That is very easy to build in directly than to play with redux to do it so. Especialy the part with loading from database when there is nothing in the store. With redux you would eventualy have empty state before you get realy one so you would load the data even if you don't need to.