State management best practises using firebase and redux in react native

TheEpic 0
Viewed 20

My app needs to implement Firebase authentication and get data from the realtime database for each user (structured as /users/{uid}/{data}). However I have not come across good information on how to access the data for each screen of my app. The options that I can't decide between are:

  • use the on listener from react-native-firebase in the root of the app to push the updated state to redux each time a user property updates
  • push a property value to both firebase and redux in each component when it needs to update a value
  • use redux only for state management and push data to firebase real time database when needed (for data redundency and iot devices)

I have avoided using firebase by itself to manage state as fetching each property for a component is rather slow, consumes a lot of bandwidth and I want the app to work for users that do not have an internet connection.

I have looked at other libraries like react-redux-firebase for state management but they seem outdated and I'm wondering what are the current best solutions for state management for an online focused app that doesn't rely exclusively on firebase.

react-native-firebase redux-toolkit react-native firebase redux
1 Answers

We typically want a single source of truth. Implementation described in option 2 seems to not follow this paradigm. That being said your intuition/ reasoning of not using firebase for state management seems correct as updating firebase for each update of UI component can be slow.

Maybe use redux/ state variables to manage UI/ component state within the app and only update firebase for data that you want to persist across app sessions.

Lastly, how you fetch updated data from firebase depends on how your app uses data. For example, if you need to fetch data for only 1 user then you can fetch it in root component and populate your redux there. If you need to fetch data for multiple users then it iss better to fetch it in component where you need it based on user id prop.

This answer might seem a bit generic but hope it helps. Please share more implementation details and I will try to provide a more detailed answer.

sushrut6190
Related