React (Native) Architecture and state management

Question

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.

Answer 1

These talks helped me understand Flux at a fundamental level. The basic idea is unidirectional data flow. Watch the talks and pay attention to them.

You don't need Redux to implement Flux– I used Alt.js instead.