Utilizando o Redux no React Native num projeto real

O Redux é uma biblioteca de gerenciamento de estado que permite que os desenvolvedores gerenciem o estado de um aplicativo de maneira mais previsível e escalável. Com o Redux, é possível centralizar o estado em um único local e tornar as mudanças de estado previsíveis e fáceis de rastrear. Neste artigo, vamos explorar como usar o Redux em um projeto simples de contador no React Native.

Instalação do Redux no React Native -

Antes de começarmos a escrever código, precisamos instalar as dependências necessárias para usar o Redux no React Native. Para isso, vamos usar o npm para instalar o pacote redux e o pacote react-redux:

npm install --save redux react-redux

Após a instalação das dependências, precisamos configurar o Redux em nosso aplicativo. Para fazer isso, crie um arquivo chamado store.js na raiz do seu projeto e adicione o seguinte código:

import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';

const store = createStore(counterReducer);

export default store;

Este código cria uma instância do store do Redux, passando como argumento o counterReducer, que vamos criar em seguida. O store é o objeto que mantém o estado do nosso aplicativo.

Em seguida, crie um arquivo chamado counterReducer.js na pasta reducers do seu projeto e adicione o seguinte código:

const initialState = {
  count: 0,
};

const counterReducer = (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 counterReducer;

Este código define o counterReducer, que é uma função que recebe um estado e uma ação e retorna um novo estado com base na ação. O initialState é o estado inicial do nosso aplicativo, que consiste em uma propriedade count inicializada como 0.

O counterReducer possui um switch que trata duas ações diferentes: INCREMENT e DECREMENT. Quando uma ação INCREMENT é despachada para o store, o counterReducer retorna um novo estado com a propriedade count incrementada em 1. Quando uma ação DECREMENT é despachada para o store, o counterReducer retorna um novo estado com a propriedade count decrementada em 1. Se uma ação desconhecida é despachada, o counterReducer retorna o estado atual.

Aplicando o contador ao Redux -

Agora que configuramos o Redux em nosso aplicativo, podemos usá-lo para criar um contador. Crie um novo arquivo chamado Counter.js na pasta components do seu projeto e adicione o seguinte código:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';

const Counter = (props) => {
  const { count, dispatch } = props;

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
      <Button title="Decrement" onPress={() => dispatch({ type: 'DECREMENT' })} />
</View>
);
};

const mapStateToProps = (state) => {
return {
count: state.count,
};
};

export default connect(mapStateToProps)(Counter);

Este código cria um componente Counter que exibe o valor atual do contador e dois botões que despacham as ações INCREMENT e DECREMENT para o store.

O connect é uma função do react-redux que conecta o componente ao store. Ele recebe uma função mapStateToProps que mapeia o estado do store para as propriedades do componente. Neste caso, estamos mapeando a propriedade count do estado do store para a propriedade count do componente.

O dispatch é uma função do store que despacha uma ação para o store. Quando o usuário clica no botão "Increment", estamos despachando a ação { type: 'INCREMENT' } para o store. Quando o usuário clica no botão "Decrement", estamos despachando a ação { type: 'DECREMENT' } para o store.

Agora que implementamos o contador, podemos usá-lo em nosso aplicativo. Vamos criar um novo componente App.js que exibe o componente Counter:

import React from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import Counter from './components/Counter';
import store from './store';

const App = () => {
  return (
    <Provider store={store}>
      <View>
        <Counter />
      </View>
    </Provider>
  );
};

export default App;

Este código cria um componente App que envolve o componente Counter com o componente Provider do react-redux. O Provider é um componente de nível superior que fornece o store para todos os componentes abaixo dele na árvore de componentes.

Neste artigo, exploramos como usar o Redux em um projeto simples de contador no React Native. Configuramos o Redux em nosso aplicativo, implementamos o contador usando o Redux e o react-redux, e usamos o componente Provider para fornecer o store para todos os componentes do aplicativo. O Redux pode parecer um pouco complicado no início, mas pode ajudar muito na manutenção e escalabilidade do seu aplicativo, especialmente quando ele cresce em complexidade e tamanho.