React Navigation(v2) com Redux (PT-BR)

Lucas Silveira
Sep 6, 2018 · 1 min read

Como já devem saber, a lib react-navigation mudou. Se você costuma usar a navegação com redux mantendo estado da mesma, esse artigo é pra você.

Nós vamos criar/separar isso em uma lista de arquivos, sim uma lista, pois a vida não é justa. Então vamos lá:

Crie a pasta src/navigation e o arquivo src/navigation/routes.js. É neste lugar que vamos setar nossas rotas.

Estou usando FluidNavigator, que me permite utilizar fades nas transições, mas você pode utilizar o recomendado:
import { createStackNavigator } from 'react-navigation' (caso utilize redux)

Crie src/navigation/reducer.js that que irá gerenciar o estado da navegação e instale: yarn add react-navigation-redux-helpers

Crie src/navigation/index.js

Estamos quase lá e agora nós precisamos configurar um reducer e um middleware no createStore/configureStore, ou sei lá como você chama isso.

Ok, agora é hora de utilizar isso no seu app

src/index.js

… E agora você consegue navegar entre as paginas de algumas formas, mas vou falar de apenas duas:

  1. a mais comum, no press de um botão:

this.props.navigation.navigate('paginate)

2 . Eu uso o saga pra fazer o dispatch dos retornos async

import { NavigationActions } from 'react-navigation'

NavigationActions.navigate({ routeName: 'somepage' });

BOM, É ISSO AÍ GALERA! E tenho que dizer OBRIGADO ao Higo Ribeiro pela sua incrivel ajuda na comunidade rocketseat.com.br.

Rocketseat

Somos uma comunidade incrível de programadores em busca do próximo nível 🚀

Lucas Silveira

Written by

Rocketseat

Somos uma comunidade incrível de programadores em busca do próximo nível 🚀

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade