React and Firebase without Redux
Even after spending a number of years contributing to tools to help integrate Firebase with Redux, such as react-redux-firebase and redux-firestore, I have recently been avoiding using Redux to store database data in new React + Firebase projects. In this article I’ll cover a bit about why, show what I have been doing instead, and finally how to easily start a new React + Firebase project using these tools.
Why?
Firebase SDK Manages State
Firebase’s client SDK manages caching and offline support internally. Having another copy of database state in redux is not only prone is inconsistencies, but also requires more code to manage that state.
Data Loading Is Async By Nature
Loading data from a database or service takes time. Writing logic to handle these loading conditions from data coming from redux state often times leads to if statements in component code which can quickly get unwieldy. Also, the logic used to pull this data out of redux state is often repeated in many places.
It would be great to have loading state available right in the component where we are attaching the listener. To simplify things even more, it would be great if we could leverage React’s Suspense to give us the syntactic sugar to declaratively…
