Construyamos: aplicación móvil nativa de criptomonedas con React Native + Redux - Capítulo III

¡Bienvenido de nuevo al desarrollo de aplicaciones nativas con React Native y Redux como un jefe! ¡Me alegra tenerte aquí! ❤

Esta es una secuela previa del capítulo II.

Donde dejamos

Obteniendo los datos con Redux y Redux Thunk

Finalmente estamos listos para obtener nuestros datos. Vamos a utilizar la API pública de coinmarketcap. Si encuentra una mejor API de cifrado, ¡hágamelo saber!

Cree un archivo src / Utils / Constants.js y agregue nuestra URL base API allí.

¿Por qué? Si la URL de la API cambia alguna vez, solo necesitamos cambiarla en un solo lugar, ¡nada más!

A continuación, dirígete a src / Actions y crea un archivo llamado FetchCoinData.js, aquí buscaremos nuestros datos de monedas de criptomonedas. Vamos a utilizar axios (sí, conozco la API de recuperación nativa). Todavía prefiero axios.

La búsqueda rápida en Google muestra por qué (más opciones, mejor API, mejor manejo de errores).

npm i - guardar axios

Importe axios y apiBaseURL desde Constants.js; también, agregue la plantilla para la acción. Intenta implementar esto por tu cuenta. Recuerde, una acción es solo una función que se exporta.

Listo?

Crear acciones

repetitivo de acción

A continuación, devolvemos una acción thunk. Las acciones thunk son funciones. ¿Por qué Thunk? Mas control. Te mostraré exactamente lo que quiero decir.

Esto puede parecer un poco confuso. Tenemos una función, que devuelve una función? Sí. Este es Thunk haciendo su magia.

Piensa en esto por un segundo. Al solicitar datos, hay 3 estados.

  1. Solicitando los datos.
  2. Solicitud de datos exitosa (200 - ¡obtuve los datos!)
  3. Error de solicitud de datos

Esto tiene mucho sentido. Piense en ello como una promesa, hay que llamar a la promesa, resolver la promesa y expulsarla.

Terminemos de implementar el resto de la acción thunk. Intente implementar la obtención de datos.

¡Guay! Esta es una forma de obtener datos con Redux y Redux Thunk. Me gusta el manejo de errores. Además, es posible usar async y esperar aquí también.

Observe el hermoso manejo de errores: esta es la razón más importante por la que estamos usando una acción Thunk aquí.

El siguiente paso: crear nuestros tipos de acción. Comience creando un archivo en src / Utils llamado ActionTypes.js

Importe los tipos de acción a nuestra acción.

¡Bien hecho! ¡Nuestra acción para recuperar los datos está completa! Necesitamos pasar nuestra carga útil al reductor y también asignar la acción a nuestro componente.

Implementando los reductores

Imagine nuestra carga útil de algo como esto:

Son solo datos en bruto. Necesitamos pasar estos datos a nuestro reductor.

Abra nuestro CryptoReducer.js y defina nuestro estado inicial

Necesitamos:

  • Estado de los datos que se están recuperando para que podamos mostrar una ruleta.
  • El estado que contiene los datos reales de la solicitud.
  • Manejo de errores: ¿tenemos un error y, de ser así, qué dice?

Siguiente: implementar el switch () condicional e importar los tipos de acción.

Estoy usando el método Object.assign () para crear nuevos objetos. Usted también es libre de usar propagación de objetos.

¿Cuál es el punto de escribir código como este? Fácil: ¡mantenibilidad! Sí, es bastante código de caldera para obtener datos, ¡pero es la forma correcta!

case FETCHING_COIN_DATA - es para cuando estamos buscando los datos y mostrando la ruleta. React maneja todas las actualizaciones de vDOM, solo necesitamos pasar nuestro estado.

Intente implementar los casos para FETCHING_COIN_DATA_SUCCESS y FETCHING_COIN_DATA_FAILURE

Solución abajo:

¡Ahora lo único que nos queda es llamar a la acción FetchCoinData!

Llamando a la acción FetchCoinData!

Intenta implementarlo. Aquí están los pasos.

  • Importe la acción a CryptoContainer.js
  • Asigne el FetchCoinData dentro del argumento de conexión.
  • llame a this.props.FetchCoinData () dentro de componentDidMount ()

¡Y eso es!

Actualice el simulador (mac: cmd + R, Windows: Ctrl + R), abra Redux Devtools y debería ver los datos en estado de cifrado.

Nota: Si no aparece, intente reiniciar el simulador

Tenemos nuestros datos asignados en this.props.crypto - ¡perfecto! ¡Implementemos las vistas en el próximo capítulo!

Gracias por llegar hasta aquí, realmente eres un guerrero y tienes lo que se necesita para ser un React + Redux pro. ¡La consistencia, aprender todos los días, nunca rendirse son los rasgos que posee! ¡Bien hecho!

¡Seeya en el próximo y último capítulo!

Ah, y aquí está el código fuente.