Exemplo de MVVM com Redux em React Native
Published: 2024-05-10 17:48:28

Neste exemplo, vamos criar uma aplicação simples de contador usando o padrão MVVM com Redux em React Native. Vamos criar um contador que permite aumentar e diminuir o valor exibido na tela.

**1. Instalação das Dependências**

Certifique-se de ter o Redux e o React Redux instalados no seu projeto React Native:

```
npm install redux react-redux
```
ou 

```
yarn add redux react-redux
```

**2. Configuração do Redux**

Crie os arquivos necessários para configurar o Redux no seu projeto:

```
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. Implementação do ViewModel**

```
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. Implementação da Visão (Componente React)**

```
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. Utilizando o Componente na Aplicação**

```
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;
```


**Explicação do Exemplo**

**Redux Store e Reducer:** Configuramos um store Redux com um reducer simples que gerencia o estado do contador.

**CounterViewModel:** Este é um módulo que encapsula a lógica de interação com o Redux. Ele utiliza os hooks useSelector e useDispatch do React Redux para acessar o estado global (count) e despachar ações (INCREMENT e DECREMENT).

**CounterView:** Este é um componente React que exibe o estado do contador e fornece botões para incrementar e decrementar o contador. Ele utiliza o CounterViewModel para acessar o estado e as funções de manipulação de estado.

Neste exemplo, o **CounterViewModel** atua como um ViewModel que conecta o estado global gerenciado pelo Redux à interface do usuário representada pelo **CounterView**. Isso permite uma separação clara entre a lógica de negócios (ViewModel) e a camada de apresentação (Visão) do aplicativo, seguindo os princípios do padrão MVVM.

Você pode expandir este exemplo adicionando mais funcionalidades e aplicando os mesmos princípios para gerenciar o estado e a lógica de negócios em uma aplicação React Native mais complexa. Certifique-se de adaptar o exemplo às necessidades específicas do seu projeto e explorar outras funcionalidades oferecidas pelo Redux para um gerenciamento de estado mais avançado.

Code: [Github](https://github.com/DevTeles/MVVM)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvsy77n0xp7loe5xd4h0.png)