Administrar el estado en una aplicación React Navigation con Redux

En este tutorial, mostraré cómo administrar la navegación y el estado de la aplicación creando una aplicación simple con React Navigation y Redux.

Requisito previo : ya debería estar familiarizado con React Native, React Navigation y Redux. Si recién está comenzando con React Native, le recomiendo este curso:

  • El curso completo de React Native y Redux

Descripción general de la aplicación

Vamos a crear una aplicación compuesta por dos páginas:

  • Página principal : muestra una vista de contenedor con un color de fondo específico y un botón. Cuando se presiona el botón, se presenta la segunda página.
  • Página de elección de color : muestra los botones ROJO, VERDE y AZUL. Cuando se selecciona un color, la aplicación vuelve a la página principal y muestra el color de fondo actualizado.

Al crear esta aplicación, aprenderá:

  • Cómo navegar entre diferentes pantallas con React Navigation
  • Cómo usar reductores y acciones para actualizar el estado de la aplicación, de modo que las acciones en una pantalla generen cambios en la interfaz de usuario en otra

Con este conocimiento, podrá crear aplicaciones más complejas.

Nota: Durante el resto de este tutorial, usaré los términos "página" y "pantalla" para significar lo mismo.

Configuración del proyecto (Expo)

Vamos a crear esta aplicación con Expo XDE.

Puede descargar Expo para su sistema operativo desde la página de GitHub de Expo XDE.

Luego, diríjase a las instrucciones de instalación en Expo Docs. Estos le mostrarán cómo instalar XDE en su escritorio y ejecutar aplicaciones dentro de Expo en el simulador / dispositivo.

Como ejecutaremos la aplicación en el simulador, también deberá descargar Xcode o Android Studio.

Al lanzar la Expo, se presenta esta página:

  • Seleccione "Crear nuevo proyecto ..."
  • Elija la plantilla en blanco y nombre el proyecto redux-navigation

Se creará el proyecto, luego se iniciará el empaquetador React Native.

Para ejecutar la aplicación en el simulador, seleccione Dispositivo -> Abrir en el simulador de iOS .

Una vez que se inicia el simulador, aparece la siguiente pantalla:

Dado que el proyecto ya está creado, se puede abrir con el editor de su elección. Utilizo Visual Studio Code con la extensión React Native Tools.

Construyendo la aplicación

Antes de que podamos codificar nuestra aplicación, necesitamos instalar todas las dependencias que necesita.

Abra una terminal, vaya a la carpeta del proyecto que creó en Expo y escriba:

npm install --save react-navigation redux react-reduxnpm install

Luego, asegúrese de presionar el botón Reiniciar en Expo . Si no hace esto, las nuevas dependencias no serán reconocidas y el simulador mostrará una pantalla de error roja si intenta usarlas.

Es hora de crear nuestra aplicación. Organice las carpetas de mi proyecto así:

/src /actions ColorChangedAction.js /components AppNavigator.js ChooseColorPage.js MainPage.js /reducers AppReducer.js ColorReducer.js NavReducer.js /state Colors.js

Puedes replicar esta misma estructura desde tu terminal:

cd redux-navigationmkdir src && cd srcmkdir actions && cd actions && touch ColorChangedAction.js && cd ..mkdir components && cd components && touch AppNavigator.js ChooseColorPage.js MainPage.js && cd ..mkdir reducers && cd reducers && touch AppReducer.js ColorReducer.js NavReducer.js && cd ..mkdir state && cd state && touch Colors.js && cd ..

Copie y pegue el siguiente código en el Colors.jsarchivo:

A continuación, cree el MainPagecon un color de fondo predeterminado y un botón:

Algunas notas:

  • MainPage es un componente de React en lugar de un componente funcional sin estado, porque necesitará acceder al estado de la aplicación
  • Utilizo flex: 1, alignSelf: 'stretch'para hacer que la vista del contenedor se extienda a toda la pantalla
  • El color de la vista del contenedor se define en el selectedColor()método, que muestra REDde nuestra COLORStabla y devuelve el código hexadecimal correspondiente
  • He agregado un onChooseColor()controlador vacío para el evento de pulsación de botón. Agregaremos el cuerpo de este método más adelante.

Es hora de conectar MainPagenuestro App.jsarchivo raíz . Reemplace el contenido antiguo con esto:

Actualizar el simulador produce esto:

No es bonito, pero muestra el color de fondo y nuestro botón según lo previsto.

Aquí hay una instantánea de lo que hemos construido hasta ahora: Instantánea del código de GitHub 1.

Agregar navegación

Ahora estamos listos para agregar algo de navegación a nuestra aplicación.

Para hacer esto, abra el AppNavigator.jsarchivo y agregue estos contenidos:

Este código se tomó prestado del ejemplo de Redux en el proyecto react-navigation.

Define a StackNavigator, utilizando nuestro MainPagecomo pantalla principal.

También configura AppWithNavigationStateun contenedor de nivel superior que contiene el estado de navegación. Si esto no parece claro, no se preocupe. Este es un código estándar en React Navigation y lo usaremos por ahora para poner las cosas en marcha.

Es hora de escribir el reductor de navegación, que mantendrá el estado de navegación dentro de la tienda Redux. Abra el NavReducer.jsarchivo y agregue lo siguiente:

Este reductor define el estado de navegación inicial de nuestra aplicación. Nuevamente, código repetitivo.

Ahora, abramos el AppReducer.jsarchivo y agreguemos esto:

A medida que nuestra aplicación crece, es posible que necesitemos otros reductores junto con nuestro NavReducer. Entonces podemos combinarlos todos juntos por dentro AppReducer.

Finalmente, podemos actualizar nuestro App.jspara usar todos estos nuevos beneficios:

El método render devuelve un proveedor con la tienda redux creada y contiene nuestro componente de nivel superior. Nuevamente, esto es solo un código repetitivo necesario para conectar las cosas con Redux.

Si actualizamos el simulador, ahora vemos una barra de navegación que aparece en la parte superior:

Después de todo este código, es posible que obtenga algunos errores en su simulador si falta algo. Si es así, use esta instantánea de código para volver al camino: Instantánea de código de GitHub 2.

Mostrar la página Elegir color

Ahora que tenemos un MainPageinterior a StackNavigator, estamos listos para agregarlo ChooseColorPagepara que podamos navegar hasta él.

Abra el ChooseColorPage.jsarchivo y agregue el siguiente código:

Algunas notas:

  • El código del render()método itera a través de cada color y lo asigna a un Button. Se establecen las propiedades titley color.
  • Cuando se toca el botón, onSelectColor()se llama al controlador con la clave de color adecuada.
  • El navigationobjeto es accesible a través de props. De hecho, se inyecta en todas las pantallas de nuestro AppNavigator.
  • Llamar this.props.navigation.goBack()nos lleva de vuelta a la pantalla anterior en el AppNavigator.
  • En esta etapa, colorNameaún no se utiliza para establecer ningún estado.

A continuación, tenemos que darnos a AppNavigatorconocer la nueva ChooseColorPagepantalla. Actualicémoslo en el AppNavigator.jsarchivo:

Finalmente, agregue el código para navegar hasta ChooseColorPagecuando Choose Colorse toque el botón en MainPage.

Si actualizamos el simulador ahora y tocamos Choose Color, la aplicación navega a la nueva pantalla, que muestra tres botones:

Note: Calling navigation.navigate('ChooseColor') works because we have named ChooseColor as one of the routes in our AppNavigator.

Tapping on the back button or on any of the color buttons brings us back to the main page, but the background color doesn’t change according to our selection.

Let’s fix that in the next section.

Again, if something is not working, you can get my saved code snapshot to this point: GitHub Code Snapshot 3.

Managing application state

We’ll use Redux to set the background color of our MainPage as our application state.

To do this, we need to define a Color Changed action, and a Color Reducer.

Open the ColorChangedAction.js file and add the following:

Then, open ColorReducer.js add add this:

In order for this reducer to be used, we need to add it to the AppReducer.js like so:

Now, we’re ready to call our colorChanged action when the user selects a color in the ChooseColorPage. This is the updated ChooseColorPage.js file:

Note that we have made three changes:

  • Imported the colorChanged action at the top
  • Connected it with connect() and mapStateToProps
  • Used it inside onSelectColor(colorName)

At this stage, we can refresh the simulator and run. If we choose a different color, the background color of the MainPage still doesn’t change.

This is because we haven’t told MainPage to use the new state.

Easy to fix. Open MainPage.js and add the required code:

A few notes:

  • mapStateToPropsnow sets the colorName from the state in the ColorReducer
  • This is then accessible via the props object and can be used inside selectedColor()
  • Don’t forget to import { connect } from 'react-redux'; at the top

If we try the app again in the simulator, we are now able to change the background color. ?

Updated snapshot: GitHub Code Snapshot 4.

Bonus: Presenting the Color Selection Page Modally

When we tap the Choose Colorbutton in the MainPage, the ChooseColorPage slides in from the right. This is the default navigation animation inside StackNavigator.

What if we wanted to present the ChooseColorPage modally instead?

This is easily done by changing the configuration of our AppNavigator like so:

Note the addition of navigationOptions with a headerLeft: null property inside ChooseColor, and the mode: ‘modal’ parameter.

If we try this on the simulator, the ChooseColorPage now slides in from the bottom.

React Navigation is very customizable. I recommend spending some time reading the documentation for the project, to learn all the things you can do with it.

Wrap Up

We have learned how to:

  • Setup and use Expo to run a mobile app on the simulator
  • Build an app with two different pages and navigate between them with React Navigation
  • Use actions and reducers to modify state from a screen, and use it to update the UI on another

You can find the complete source code on GitHub here.

I also shared the project publicly on Expo here.

I hope you enjoyed this tutorial. A good next step from here is to look at the official React Navigation Examples, as well as the other tutorials from the community.

Comments and feedback are appreciated. ?

And if you ???, I may even do a step-by-step video tutorial. ?

About me: I’m a freelance iOS developer, juggling between contract work, open source, side projects and blogging.

I’m @biz84 on Twitter. You can also see my GitHub page. Feedback, tweets, funny gifs, all welcome! My favourite? Lots of ???. Oh, and chocolate cookies.