CODEWITHSUNDEEP
reactjsfirebasereact-nativefirebase-realtime-databasereact-redux
owiewio
owiewio

Reputation: 361

Lookup multiple Firebase entries using Redux action

I have this Redux action, which looks up a user and returns all the items they have:

export const itemsFetch = () => {
  const { currentUser } = firebase.auth();
  return dispatch => {
    firebase
      .database()
      .ref(`users/${currentUser.uid}/items`)
      .on('value', snapshot => {
        dispatch({ type: ITEMS_FETCH_SUCCESS, payload: snapshot.val() });
      });
  };
};

Works great, and each item returned has a unique key associated with it.

I want to modify this action to look up specific items, which I've done. That works fine too:

export const itemLookup = uid => {
  const { currentUser } = firebase.auth();
  return dispatch => {
    firebase
      .database()
      .ref(`users/${currentUser.uid}/items/${uid}`)
      .on('value', snapshot => {
        dispatch({ type: ITEM_LOOKUP_SUCCESS, payload: snapshot.val() });
      });
  };
};

This also works fine, but I can only use this to lookup a single item.

I want to loop over an array of item ids, and lookup details for each. Doing this from a component, and using mapStateToProps, causes the component to rerender each time, losing the previous lookup in the process.

Is it best to loop over the ids I have at a component level, and make multiple calls. Or should I pass the array to the action, and somehow loop over them within the action?

Thanks

I feel like I'm doing something dumb, or misunderstanding Redux completely.

Upvotes: 0

Views: 309

Answers (2)

owiewio
owiewio

Reputation: 361

Using the response from sfratini, I managed to work it out. Here's the action:

export const itemLookup = oid => {
  const { currentUser } = firebase.auth();

  const items = []

  return dispatch => {
    new Promise(function (res, rej) {
      oid.forEach(id => {
        firebase.database().ref(`users/${currentUser.uid}/items/${id}`).on('value', snapshot => {
          items.push(snapshot.val())
        })
      })

    }).then(dispatch({ type: ITEM_LOOKUP_SUCCESS, payload: items }))
  }

I used the same reducer, and now the items array makes it down to component level. Perfect!

Upvotes: 1

sebastianf182
sebastianf182

Reputation: 9978

In my opinion, this is one of the few limitations that firebase has (along side with queries) that sometimes make me want to grow hair again and lose it (I am bald).

I am more experienced with Firestore although I have used Database, but I think you are correct that you can only request one item in Firebase. What I would do to solve this, is to create a new action that receives an array of IDs and then executes and array of promises that will query each doc.

Something like (pseudo code, and you might need to wrap your firebase call into a promise):

let promises = [];
arrayIds.forEach(id => {
   promises.push(firebase.database().ref.get(id))
})
return Promise.all(promises).then(dispatch(results))

Now, if you find that the amount of results are usually not a lot, it is totally fine (and usually the way Firebase requires you to) to complete the data filtering in the client.

Upvotes: 1

Related Questions