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
Top comments (0)