mayo 8, 2016 Uncategorized

Consumir un API REST con React y Redux

En este vídeo tutorial se construye desde cero una pequeña aplicación React/Redux que se conecta al API de un servidor remoto para recuperar un listado de usuarios y mostrar ese listado en forma de tabla.

Github

En primer lugar creamos la acción (en realidad es un action creator), que es donde se encuentra el código encargado de conectarse al API. Como vamos a realizar una llamada asíncrona, en lugar de devolver un simple objeto JSON, nuestro action creator va a tener que devolver una función. Esta función la va a tener que procesar un middleware, redux-thunk. Por lo tanto vamos a tener que instalar este middleware, y también vamos a instalar el módulo axios para realizar peticiones HTTP. El código de nuestro action creator quedaría definido de la siguiente forma:

 

El siguiente fichero que vamos a crear es nuestro reducer. Este fichero no tiene nada especial. Se trata de un reducer estándar:

 

Y por último, tenemos que modificar nuestro Componente para que se conecte a nuestro almacén de Redux y para que muestre el listado de usuarios en forma de tabla. El código del componente quedaría de la siguiente forma:

 

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Back to top