MVVM example with Redux in React Native

In this example, we will create a simple counter application using the MVVM pattern with Redux in React Native. Let's create a counter that allows you to increase and decrease the value displayed on the screen.

1. Installation of Dependencies

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

npm install redux react-redux

ou

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;

const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default rootReducer;

3. ViewModel implementation

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)

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

import React from 'react';
import { Provider } from 'react-redux';
import CounterView from './components/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.
Code: Github