title: React (Native) Architecture and state management
body: <p>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.</p>
  
  <p><strong>Premise:</strong></p>
  
  <ul>
  <li>App mostly for consuming video and audio content, storing user statistics and progress</li>
  <li><em>React Native Firebase</em> from invertase.io</li>
  <li><em>Redux</em> used for storing data structure from <em>Firebase Realtime Database</em></li>
  </ul>
  
  <p>My current approach:</p>
  
  <ul>
  <li>If a React Component needs data, it gets it via Redux or parent component via props.</li>
  <li>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.</li>
  <li>If the viewmodel gets new data from somewhere, the component state gets it via Observer pattern by implementing an interface</li>
  <li>If data needs to be persisted to Redux and/or Firebase, the viewmodel does it. I pass the Store object from the component</li>
  </ul>
  
  <p>Approach I read/heard/discussed:</p>
  
  <ul>
  <li>All data from/to components is received/sent through Redux</li>
  <li>All data manipulations are done in Redux Actions</li>
  <li>No separate controllers/viewmodels</li>
  </ul>
  
  <p>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.</p>