Exemplo de MVVM com Redux em React Native

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

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

Blog

Exemplo de MVVM com Redux em React Native

Rafael Teles Vital

Join Our Newsletter. No Spam, Only the good stuff.

Related