Redux MVVM Architecture Example for React Native

1. Installation of Dependencies

Make sure you have Redux and React Redux installed in your React Native project:

npm install redux react-redux

or

yarn add redux react-redux

2. Redux Configuration

Create the necessary files to configure Redux in your project:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

3. ViewModel implementation

Implement the ViewModel using React Redux’s useSelector and useDispatch:

import { useSelector, useDispatch } from 'react-redux';

const CounterViewModel = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return {
    count,
    increment,
    decrement,
  };
};

export default CounterViewModel;

4. Vision Implementation (React Component)

Implement the View component using the ViewModel:

import React from 'react';
import { View, Text, Button } from 'react-native';
import CounterViewModel from './CounterViewModel';

const CounterView = () => {
  const viewModel = CounterViewModel();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Contador: {viewModel.count}</Text>
      <Button title="Incrementar" onPress={viewModel.increment} />
      <Button title="Decrementar" onPress={viewModel.decrement} />
    </View>
  );
};

export default CounterView;

5. Using the Component in the Application

Use the CounterView component in your application:

import React from 'react';
import { Provider } from 'react-redux';
import CounterView from './CounterView';
import store from './redux/store';

const App = () => {
  return (
    <Provider store={store}>
      <CounterView />
    </Provider>
  );
};

export default App;

Example Explanation

• Redux Store and Reducer: We set up a Redux store with a simple reducer that manages the counter state.
• CounterViewModel: This is a module that encapsulates the logic for interacting with Redux. It uses React Redux’s useSelector and useDispatch hooks to access global state (count) and dispatch actions (INCREMENT and DECREMENT).
• CounterView: This is a React component that displays the state of the counter and provides buttons to increment and decrement the counter. It uses the CounterViewModel to access state and state manipulation functions.

In this example, the CounterViewModel acts as a ViewModel that connects the global state managed by Redux to the user interface represented by the CounterView. This allows for a clear separation between the business logic (ViewModel) and the presentation layer (View) of the application, following the principles of the MVVM pattern.

You can expand this example by adding more functionality and applying the same principles to manage state and business logic in a more complex React Native application. Be sure to adapt the example to your project’s specific needs and explore other functionality offered by Redux for more advanced state management.