Trying to understand the best practice for React/React Native state. Coming from the Java world, I tend to follow MVC/MVVM in my applications, but reading about other approaches makes me wonder if I am designing my application properly.
Premise:
- App mostly for consuming video and audio content, storing user statistics and progress
- React Native Firebase from invertase.io
- Redux used for storing data structure from Firebase Realtime Database
My current approach:
- If a React Component needs data, it gets it via Redux or parent component via props.
- If a component needs to manipulate/fetch more data, I have separate viewmodel classes (Typescript files with no dependency to React/RN) that are accessed in a component.
- If the viewmodel gets new data from somewhere, the component state gets it via Observer pattern by implementing an interface
- If data needs to be persisted to Redux and/or Firebase, the viewmodel does it. I pass the Store object from the component
Approach I read/heard/discussed:
- All data from/to components is received/sent through Redux
- All data manipulations are done in Redux Actions
- No separate controllers/viewmodels
I don't have too much history with React Native, so I am trying to understand whether the latter approach is actually superior for some reason.