DEV Community: Rafael Teles Vital

Exemplo de MVVM com Redux em React Native

Rafael Teles Vital — Fri, 10 May 2024 17:48:28 +0000

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

Como Usar o MobX em um Projeto React Native

Rafael Teles Vital — Sun, 05 May 2024 03:13:34 +0000

O MobX é uma biblioteca popular para gerenciamento de estado em aplicativos React (e React Native) que oferece uma abordagem simples e eficaz para lidar com o estado da aplicação de forma reativa. Ele permite que você defina observáveis, ações e reações para automatizar atualizações de componentes com base nas mudanças de estado.

Instalação do MobX

Instale o MobX e o MobX React (ou MobX React Native) em seu projeto:

yarn add mobx mobx-react

O MobX é uma ferramenta poderosa e flexível para gerenciamento de estado em aplicativos React Native. Ele oferece uma abordagem mais direta para o gerenciamento de estado em comparação com outras bibliotecas como Redux, tornando-o uma escolha popular para projetos que exigem uma solução simples e eficaz para o estado da aplicação. Experimente o MobX em seu próximo projeto React Native para experimentar seus benefícios de gerenciamento de estado reativo.

Github: AppMobx
Documentação: Doc MobX

Exemplo prático abaixo:

Redux + Zustand

Rafael Teles Vital — Fri, 19 Apr 2024 23:49:58 +0000

Finalizei mais um projeto da rocketseat, só para aprimorar mais com o redux e o famoso zustand.

Nesse projeto você vai encontrar os fundamentos do redux basicamente, criei um store do redux para gerenciar os estados da aplicação, criei reducers, slice, hook global e claro não poderia faltar os testes unitários deles também.

Foi criado essa interface UI simples de um player comum de aulas.

Conectando à API utilizando o "Async Thunks", tem também um loading enquanto carrega os dados dessa API.

E finalmente fiz a migração do redux para o zustand e mais novos teste unitários no zustand.

Projeto - Github

Utilizando "createAsyncThunk" do Redux para fazer chamada async

Rafael Teles Vital — Wed, 17 Apr 2024 23:51:51 +0000

JÁ PRECISOU INICIALIZAR O ESTADO DO REDUX COM RESULTADO DE UMA API ASYNC?

Pois bem aqui está um exemplo de como funcionar essa chamada async da API, para inicializar o estado no redux.

Primeiramente criamos uma função async, nesse caso chamada de "loadCourse" e depois podemos colocar dentro do "createSlice" na propriedade extraReducers, quando a função criada estiver com o state como "fulfilled" recebemos o retorno no campo action.payload, como segue abaixo.

export const loadCourse = createAsyncThunk(
  'player/load',
  async () => {
    const response = await api.get('/courses/1')

    return response.data
  }
)

export const playerSlice = createSlice({
  name: 'player',
  initialState,
  reducers: { 
  // como se fosse useEffect para carregar
  extraReducers(builder) {
    builder.addCase(loadCourse.fulfilled, (state, action) =>{
      state.course = action.payload
    })
  }
})

Responsividade

Rafael Teles Vital — Mon, 18 Mar 2024 23:48:34 +0000

A responsividade no React Native difere um pouco da abordagem utilizada em desenvolvimento web, onde usamos media queries e unidades relativas. No React Native, a responsividade é mais sobre adaptar os layouts e componentes para diferentes tamanhos de tela e orientações.

Aqui está um exemplo prático de como você pode lidar com a responsividade no React Native:

Suponha que você tenha um componente que exibe uma lista de itens. Você pode ajustar o layout e o estilo com base no tamanho da tela usando as dimensões da janela:

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista de Itens</Text>
      <View style={width < 500 ? styles.listViewSmall : styles.listViewLarge}>
        {/* Renderizar a lista de itens aqui */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  listViewSmall: {
    width: '80%',
    maxHeight: height * 0.5,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
  listViewLarge: {
    width: '90%',
    maxHeight: height * 0.8,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
});

export default MyComponent;

Neste exemplo:

Usamos Dimensions.get('window') para obter as dimensões da janela.
Dependendo do tamanho da largura da janela (width), aplicamos estilos diferentes para o componente da lista.
Para telas menores, usamos estilos mais compactos (listViewSmall), e para telas maiores, usamos estilos mais espaçados (listViewLarge).

Isso é apenas um exemplo simples de como você pode abordar a responsividade no React Native. Dependendo das necessidades do seu aplicativo, você pode precisar adotar outras estratégias, como usar bibliotecas de layout responsivo ou criar layouts específicos para diferentes tamanhos de tela.

"reactStrictMode" no Next.js

Rafael Teles Vital — Fri, 16 Feb 2024 17:20:37 +0000

Fala pessoal,

Você provavelmente já deve ter passado por requests diplicados, ou seja, chamando a sua requisição duas vezes sem saber o motivo real.

Pois bem, você pode retirar essa chamada duplicadas com a seguinte configuração abaixo:

reactStrictMode

É bom saber: desde o Next.js 13.4, o modo estrito é true o padrão da aplicação, portanto, a configuração só é necessária para o pages. Você ainda pode desativar o Modo Estrito configurando reactStrictMode: false no seu arquivo next.config.ts, exemplo:

Após essa configuração acima:

Sugestão da própria documentação: sugerimos fortemente que você habilite o Modo Estrito em seu aplicativo Next.js para prepará-lo melhor para o futuro do React.

Mais sobre a documentação:

https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode

Como configurar teste unitário no Next.js14 com Jest.

Rafael Teles Vital — Thu, 08 Feb 2024 11:08:43 +0000

Olá pessoal!

Testes unitários são uma prática essencial no desenvolvimento de software, visando garantir que partes específicas do código (unidades) funcionem conforme o esperado. Jest é uma ferramenta popular para realizar testes em JavaScript e TypeScript, e neste contexto, ele é frequentemente utilizado com aplicações construídas em React, Node.js e outros frameworks.

Instalando as dependências:

Para configurar o Jest vamos instalar pacotes jest, @testing-library/react e @testing-library/jest-dom:

yarn add -D jest @testing-library/react @testing-library/jest-dom

Configurando o teste no projeto

É necessário criar um arquivo de configuração para que o Jest entenda como realizar os testes.

Crie um arquivo jest.config.js na raiz do seu projeto:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

Agora, basta adicionar um script para executar os testes no package.json:

{
"scripts": {
"test": "jest --watch"
},
}

Pronto agora podemos criar nosso primeiro teste.

dentro do seu projeto criar um arquivo, por exemplo "exemplo.test.tsx" ou "exemplo.test.jsx"

it('Somando números', () => {
    expect(1 + 1).toBe(2)
  })

Desafios de Segurança em Aplicações React Native: Fique Atento! 👀🔒

Rafael Teles Vital — Tue, 06 Feb 2024 22:02:49 +0000

Olá, comunidade do LinkedIn!

🚨 Explorando a Segurança em Aplicações React Native: Um Alerta Importante! 🚨

O React Native tem revolucionado o desenvolvimento móvel, proporcionando eficiência e agilidade. Contudo, como em qualquer tecnologia, a segurança deve ser uma prioridade. Vamos discutir um desafio relevante que todos os desenvolvedores React Native devem ter em mente.

O Problema:

Potenciais Vulnerabilidades de Segurança em Aplicações React Native

Origens Diversificadas de Código:

Aplicações React Native frequentemente incorporam módulos de código nativo, especialmente para interações específicas com o sistema operacional. Isso cria uma variedade de origens de código, aumentando o risco de vulnerabilidades.

Dependências Desatualizadas:

Muitas aplicações utilizam bibliotecas e módulos de terceiros. A não atualização regular dessas dependências pode deixar a aplicação suscetível a falhas de segurança já corrigidas em versões mais recentes.

Armazenamento Local Inseguro:

A gestão inadequada de dados locais, como tokens de autenticação, pode expor a aplicação a ameaças de segurança, especialmente se não houver uma devida criptografia ou medidas de proteção.

O Que Você Pode Fazer:

Auditoria de Código: Regularmente analise e audite seu código, especialmente módulos nativos e bibliotecas de terceiros, em busca de possíveis vulnerabilidades.

Atualizações Constantes:

Mantenha suas dependências e bibliotecas atualizadas para garantir que você esteja utilizando versões corrigidas e seguras.

Armazenamento Criptografado:

Ao lidar com dados sensíveis, certifique-se de implementar técnicas de armazenamento local seguro, como criptografia de dados.

Testes de Segurança:

Integre testes de segurança em seu ciclo de desenvolvimento para identificar possíveis falhas antes de implementar em produção.

Lembre-se:

A segurança é uma jornada contínua, não um destino final. Colabore com a comunidade, compartilhe boas práticas e mantenha-se atualizado sobre as últimas tendências em segurança de aplicativos móveis.

Vamos manter nossas aplicações seguras e robustas! 💻🔐✨

Seja seguro, seja React Native! 🚀

🚀 Revolvendo o problema de hydratação com nextJs 14 🚀

Rafael Teles Vital — Wed, 27 Dec 2023 22:10:26 +0000

Olá desenvolvedores!!!

O problema:

Atualmente passei por esse problema, o famoso "hydration for rendering" com o nextJs14

A solução:

Utilizando o hook useEffect só roda no cliente, então agora podemos mostrar a UI com segurança para o usuário, dessa forma como segue no código abaixo:

'use client'

import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'

const ThemeSwitch = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  // useEffect only runs on the client, so now we can safely show the UI
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="system">System</option>
      <option value="dark">Dark</option>
      <option value="light">Light</option>
    </select>
  )
}

export default ThemeSwitch

🚀 Desafio React Native: Trabalhando com Performance 🚀

Rafael Teles Vital — Thu, 21 Dec 2023 22:17:29 +0000

Olá, comunidade React Native! 👋

Ultimamente, tenho enfrentado um desafio interessante ao trabalhar com React Native: otimização de desempenho em listas longas. 🚀

Problema: Ao renderizar uma lista extensa de itens, percebi uma queda no desempenho, especialmente durante o carregamento inicial.

Solução: Após pesquisar, descobri que a implementação de Lazy Loading e Virtualization pode ser a chave. Utilizando bibliotecas como FlatList, SectionList, e ajustando as propriedades como initialNumToRender e windowSize, consegui notáveis melhorias na performance.

Agora, os itens são renderizados dinamicamente à medida que são visíveis, reduzindo a carga inicial e melhorando a experiência do usuário.

👉 Dica Extra: Considere também o uso de React.memo para otimizar componentes individuais.

Compartilhe suas dicas e experiências enfrentando desafios de desempenho em React Native! Juntos, podemos superar qualquer obstáculo. 💪

🛠️ Challenge and Solution in React Native 🛠️

Rafael Teles Vital — Sat, 16 Dec 2023 17:36:36 +0000

Hi LinkedIn folks! 👋

I would like to share a recent experience facing an intriguing challenge in React Native and how we managed to overcome it.

💡 The Problem:

Our React Native app was experiencing a notable performance issue on more complex screens. The response time was lower than expected, affecting the user experience.

🧐 Investigation:

After some analysis, we discovered that excessive component rendering was causing bottlenecks. Unnecessary components were being rendered even when they were not visible.

✨ The Solution:

We implemented a rendering optimization technique using React Memoization. This allowed us to avoid unnecessary rendering and significantly improve performance.

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
   // Using useMemo to memorize the component
   const optimizedComponent = useMemo(() => (
     {/* Your component here */}
   ), [date]); // Dependencies that, when changed, trigger re-rendering

   return optimizedComponent;
};

🚀 Result:

Implementing this solution resulted in a more agile application response, providing a smoother experience for users, especially on more complex screens.

🌐 Lessons Learned:

Optimizing the rendering process is critical to ensuring optimal performance in React Native applications. This experience reminded us of the importance of carefully considering how and when components are rendered.

💬 Let’s exchange ideas:

Have you experienced similar challenges in your React Native projects? How did you address performance issues? Share your experiences in the comments!

🛠️ Desafio e Solução em React Native 🛠️

Rafael Teles Vital — Wed, 13 Dec 2023 22:04:47 +0000

Oi pessoal do LinkedIn! 👋

Gostaria de compartilhar uma experiência recente enfrentando um desafio intrigante em React Native e como conseguimos superá-lo.

💡 O Problema:

Nosso aplicativo React Native estava enfrentando um problema de desempenho notável em telas mais complexas. O tempo de resposta estava aquém do esperado, afetando a experiência do usuário.

🧐 Investigação:

Após algumas análises, descobrimos que a renderização excessiva de componentes estava causando gargalos. Componentes desnecessários estavam sendo renderizados mesmo quando não estavam visíveis.

✨ A Solução:

Implementamos uma técnica de otimização de renderização usando o React Memoization. Isso permitiu que evitássemos renderizações desnecessárias e melhorássemos significativamente o desempenho.

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  // Utilizando useMemo para memorizar o componente
  const optimizedComponent = useMemo(() => (
    {/* Seu componente aqui */}
  ), [data]); // Dependências que, quando alteradas, acionam a re-renderização

  return optimizedComponent;
};

🚀 Resultado:

A implementação dessa solução resultou em uma resposta mais ágil do aplicativo, proporcionando uma experiência mais suave aos usuários, especialmente em telas mais complexas.

🌐 Lições Aprendidas:

A otimização do processo de renderização é fundamental para garantir o desempenho ideal em aplicativos React Native. Essa experiência nos lembrou da importância de considerar cuidadosamente como e quando os componentes são renderizados.

💬 Vamos trocar ideias:

Já passou por desafios semelhantes em seus projetos React Native? Como você abordou questões de desempenho? Compartilhe suas experiências nos comentários!