How to fetch data from firebase using Redux?

Question

I have a long list of items in firebase firestore, I get the data every time the user opens the list page (so I can render it in a Flatlist) like that:

const [doctors, setDoctors] = useState([]);
    useEffect (() => { 
      firebase
        .firestore()
        .collection('Doctors')
        .get()
        .then((snapshot) => {
          let doctors = snapshot.docs.map((doc) => {
            const data = doc.data();
            const id = doc.id;
            return { id, ...data };
          });
          setDoctors(doctors);
        }); })


<FlatList  renderItem={renderItem} />

I want to use Redux to call the data instead of calling it every time the user opens the list. How can I do that?

Answer 1

I think the most common way to do this is with Redux-thunk: https://redux.js.org/usage/writing-logic-thunks

In general, you need a middleware that can handle async side-effects like backend calls. And depending on your choice the implementation will vary.

There are other libraries also:

• Redux-observable: https://redux-observable.js.org/
• Redux-saga: https://redux-saga.js.org/
• and others