Utilizando o Redux no React Native num projeto real
Tags: react, redux, reactnative
Published: 2023-04-20 17:02:08

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.