Consumir API con React + Redux

En este tutorial aprenderemos a consumir una restfull api en un proyecto con React y Redux. Crearemos una aplicación para mostrar un listado de posts, ademas de poder agregar, modificar y eliminar posts.

¿Qué necesitamos para comenzar?

• Conocer y saber utilizar ES6

• Conocimientos básicos de React

• Conocimiento básico de redux

• Node.js >=v6 en tu computadora

Partiremos de un repositorio que tiene ya una página para mostrar posts y nosotros solo agregaremos la funcionalidad de consultar los posts desde la api de jsonPlaceholder. Para ello, vamos a clonar el repositorio.

$ git clone https://github.com/Clau8a/redux-ejemplo.git nombre_proyecto

Una vez clonado el proyecto podemos correrlo para ver su funcionalidad.

$ npm run start

Ahora que tenemos nuestro repositorio analicemos un poco el ejemplo, estamos utilizando la vista App.js para desplegar los posts e interactuar con ellos, además tenemos un archivo post.js que tiene las mecánicas de comportamiento para un post. Los posts están estructurados en formato json y tienen cuatro propiedades un userId, id, title, y body, por lo tanto esas propiedades utilizaremos para modificarlos. Lo que vamos a hacer es agregar un archivo para crear las funciones HTTP. Asi que, dentro de la carpeta src creamos una carpeta llamada lib y dentro creamos un archivo con el nombre de api.js. Para hacer llamadas utilizaremos la función fetch. La función fetch es una alternativa a XMLHttpRequest, fetch regresa una promesa que no será rechazada como error HTTP, en cambio ésta se resolverá, siempre y cuando no haya un fallo en la red. Enviaremos dos parámetros en la función fetch, url y request. La variable url la formaremos con una base que es la url del servidor y le concatenaremos los parámetros necesarios para cada tipo de petición y en el request pondremos el método HTTP, el body y los headers. Como mencionamos anteriormente, utilizaremos jsonPlaceholder , que es una api gratuita para regresar datos en formato json, por lo tanto vamos a agregar una variable con la url del servidor:

//variable url del servidor
const BASEURL = "https://jsonplaceholder.typicode.com";

A continuación tenemos un ejemplo de una función para agregar un post, en ella recibimos un objeto como parámetro llamado post (este contiene las propiedades userId, id, title, y body), formamos la url concatenando BASEURL (url del servidor) más la ruta a consultar, después creamos el objeto request al cual le agregamos el método HTTP POST, como body le mandamos el parámetro post y utilizamos JSON.stringify() y especificamos que el contenido que mandaremos es tipo json, por último hacemos la petición con el fetch el cual nos regresará un objeto que transformaremos a json.

export const apiAddPost = (post) => {
    const url = BASEURL + "/posts/";
    const request = {
        method:'POST',
        body: JSON.stringify(post),
        headers: {"Content-type":"application/json; charset=UTF-8"}
    };
    return fetch(url, request)
        .then(response => response.json());
};

Agregaremos lo siguiente a nuestro archivo api.js (archivo api.js completo) Ya tenemos nuestras peticiones listas ahora necesitamos comenzar con nuestros reducers. Por ello, agregaremos Redux.js a nuestro proyecto.

$ npm i redux

Agregaremos también react-redux para hacer nuestro enlazamiento de datos con las vistas.

$ npm i react-redux

Y agregamos también un middleware para facilitar el manejo del dispatch de Redux

$ npm i redux-thunk

En la carpeta src agregamos una carpeta llamada reducers y dentro de ella agregamos un archivo postReducer.js. En este archivo vamos a importar las funciones del archivo api.js

import {apiGetPost, apiAddPost, apiDeletePost, apiUpdatePost} from 
'../lib/api';

Después vamos a agregar nuestro estado inicial en el cual solo tendremos una lista de posts

const initialState = {posts: []};

Agregamos los tipos de actions que serán cuatro y las actions

//tipos de actions
const GET_POSTS = 'GET_POSTS';
const ADD_POST = 'ADD_POST';
const UPDATE_POST = 'UPDATE_POST';
const DELETE_POST = 'DELETE_POST';

//actions
const getPosts = (posts) => ({ type: GET_POSTS, payload: posts });
const addPost = (post) => ({ type: ADD_POST, payload: post });
const updatePost = (post) => ({ type: UPDATE_POST, payload: post });
const deletePost = (id) => ({ type: DELETE_POST, payload: id });

Agregamos las funciones que utilizaremos en nuestras vistas para hacer las peticiones y que serán las responsables de desencadenar nuestras actions.

export const fetchGetPost = () => {
//redux-thunk nos permite mandar el dispatch como parámetro
    return (dispatch) => {
    //Llamamos a la función de la api
        apiGetPost()
            .then(res => 
//al reolverse la petición de manera correcta desencadenamos la acción
// getPosts enviando los posts recibidos
                {dispatch(getPosts(res));})
            .catch(res => {console.log(res);})
    }
};

Agregamos la función para hacer las modificaciones en el store, la cual debe ser una función pura, que pueda exportarse y que considere todos los tipos de acciones.

¿Qué es una función pura?

Uno de los principios de Redux es realizar cambios mediante el uso de funciones puras. Una función pura es una función que regresa un valor que es procesado basado en sus argumentos. Las funciones puras toman al menos un argumento y siempre regresan un valor. Otra de las características de las funciones puras es que no alteran variables globales o cambian algún elemento del estado de la aplicación.