MVVM com Factory no React Native

Recentemente encontrei um vdeo muito bom falando sobre Arquitetura MVVM no React Native. Realmente um assunto que no muito abordado na comunidade React/React-Native. O que acaba tornando o contedo abordado de grande importncia.

Portanto, a proposta deste contedo trazer um complemento sobre a abordagem do Padro de Arquitetura MVVM utilizando o Padro de Projeto Factory.

Diferente do MVP (Model-View-Presenter), o MVVM (Model-View-ViewModel) traz uma proposta onde deixamos o tratamento das informaes para o ViewModel, um pouco parecido com o Presenter. No entanto, a grande diferena , enquanto o Presenter do MVP conhece a View e tem o papel de "apresentar". No MVVM o ViewModel tem o papel de tambm conter o tratamento das informaes, porm, ele no conhece a View, ocorrendo o contrrio, a View conhecendo o ViewModel, ou vrios ViewModel's.

Feita a introduo, vamos ao ponto que eu quero chegar. comum "injetarmos" o ViewModel diretamente na nossa View utilizando o MVVM. E isso me incomoda um pouco, portanto, vamos utilizar o padro de projeto Factory para desacoplarmos a implementao do ViewModel da nossa View.

Eu aproveitei o excelente contedo apresentado no video e fiz um fork do repositrio para realizarmos as nossas alteraes.

A primeira coisa a ser feita removermos o useLoginViewModel que estava sendo usado diretamente dentro da nossa View. Como podemos ver no cdigo abaixo:

import useLoginViewModel from './view.model';const LoginView: React.FC = () => {  const {email, password, setEmail, setPassword, isLoading, onSubmit} =    useLoginViewModel();};

Vamos receber o loginViewModel via props, como o useLoginViewModel retornava o tipo LoginViewModel, ento a alterao ser mnima. Portanto:

• Recebemos loginViewModel via props;

const LoginView: React.FC<Props> = ({loginViewModel}) => {  const {email, password, setEmail, setPassword, isLoading, onSubmit} =    loginViewModel;};

• Agora vamos definir um tipo para o loginViewModel, como j mencionado o useLoginViewModel retornava um tipo LoginViewModel, logo:

type Props = {  loginViewModel: LoginViewModel;};

Bem, isso feito. Vamos criar o nosso Factory que vai realizar a composio das dependncias, ou seja, vamos passar o nosso loginViewModel via props para a nossa View.

import React from 'react';import LoginView from '../../../pages/login/view';import useLoginViewModel from '../../../pages/login/view.model';const loginViewFactory: React.FC = () => {  const loginViewModel = useLoginViewModel();  return <LoginView loginViewModel={loginViewModel} />;};export default loginViewFactory;

Por fim, agora basta usar o nosso LoginFactory na raiz do App, em vez do LoginView.

import React from 'react';import LoginFactory from './helpers/factories/login/view.factory';const App: React.FC = () => {  return <LoginFactory />;};export default App;

E isso pessoal, com essa abordagem, conseguimos desacoplar da nossa View o ViewModel, passando apenas o tipo LoginViewModel via props, deixando totalmente independente da implementao utilizando um Factory. Ah, e os testes esto passando normalmente sem necessidade de alteraes.

Caso tenha interesse em ver o cdigo: https://github.com/MarlonBeloMarques/mvvm-factory-with-react-native

Valeu galera, at a prxima.