Obtener datos de un archivo JSON con una aplicación React & Redux

La mayoría de las veces, cuando obtenemos datos, lo hacemos desde un punto final externo (API) que es un servidor. Una vez que se obtienen los datos, hacemos una operación CRUD (Crear, Leer, Actualizar, Eliminar) en ellos.

Este artículo demostrará cómo obtener datos correctamente de un archivo JSON en su aplicación React & Redux y consumirlos en la interfaz, al tiempo que explica el flujo de trabajo de React-Redux.

Vamos a crear una insignia para premiar a los usuarios que hayan recibido más de 5 votos. Nos burlaríamos de los datos JSON localmente y le daríamos a cada usuario que tenga más de five-votes una insignia usando reaccionar y redux para consumir los datos.

Antes de continuar, supongo que tiene conocimientos básicos de React , React-Redux y JSON .

Configuración de un archivo JSON local

En un proyecto en blanco Create React App, cree un archivo JSON local llamado data.json dentro del directorio público.

Sus llamadas a la API Fetch realizadas desde un componente React siempre buscan archivos o cualquier otro activo relevante dentro de este directorio público. Create-React-App no coloca sus activos automáticamente dentro de este directorio durante la compilación, por lo que debe hacerlo manualmente.

A continuación, coloque algunos datos JSON ficticios dentro de este archivo. Para fines de demostración, los datos JSON utilizados en el siguiente ejemplo se generan a partir de JSON Generator. Si está utilizando su propio JSON, asegúrese de que tenga el formato correcto.

 [ { "id": 1, "name": "Daniel", "email": "[email protected]", "post": "I love football", "votes": 5 } ]

Configurando React-Redux

Necesitaríamos instalar algunas dependencias, que usaríamos a lo largo del proyecto.

Para instalar eso, abra el directorio de su proyecto en su terminal y escriba el siguiente código:

 npm i -s react-redux redux axios redux-thunk or yarn add react-redux redux axios

Además, instalaríamos fontaweasome , donde importaríamos iconos a modo de insignia.

 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome

o

 yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/react-fontawesome

En el directorio src/ hagamos 6 archivos

1. origen/
2. constantes.js
3. acción.js
4. reductor.js
5. tienda.js
6. fuenteAwesome.js

src/ constantes .js

Dentro de constant.js, necesitamos agregar un estado para buscar al usuario:

 const USER = { LOAD: "REQUEST_USERS_DATA", LOAD_SUCCESS: "RECEIVE_USERS_DATA", }; export default USER;

src/ reductor .js

Vamos a importar la constante en el reductor. Un reductor es una función pura que toma una acción y el estado inicial de la aplicación y devuelve el nuevo estado.

La acción describe lo que sucedió y es trabajo del reductor regresar al nuevo estado basado en esa acción.

 import USER from "./constants"; const initalState = { usersData: [], isLoading: false, isError: false, }; const reducer = (state = initalState, action) => { switch (action.type) { case USER.LOAD: return { ...state, isLoading: true, isError: false, }; case USER.LOAD_SUCCESS: return { ...state, usersData: action.usersData, isLoading: false, }; default: return state; } }; export default reducer;

src/ acción .js

Este archivo de acción transporta una carga útil de información de su aplicación a la tienda.

Redux se basa en acciones que los reductores envían y escuchan, que actualizan el estado en consecuencia.

 import axios from "axios"; import USER from "./constants"; export const requestUsers = (data) => async (dispatch) => { dispatch({ type: USER.LOAD, }); try { const json = await axios.get("data.json"); console.log(json); dispatch({ type: USER.LOAD_SUCCESS, usersData: json.data, isError: false, }); } catch (e) { dispatch({ type: USER.LOAD_SUCCESS, usersData: [], isError: true, }); } };

src/ índice .js

En el archivo de índice, importaríamos fontawesome para que cualquier componente pudiera heredar de él.

También necesitaríamos un proveedor y una tienda. El componente Proveedor hace que la tienda Redux esté disponible para cualquier componente anidado que necesite acceder a la tienda Redux.

Las tiendas Redux son estados globales que almacenan datos que desea usar en múltiples componentes sin necesidad de perforar accesorios en cada nivel de su árbol de componentes. Una tienda Redux no tiene un límite en la cantidad de datos almacenados, por lo que puede usarla para almacenar casi cualquier cosa, incluidos los datos voluminosos de JSON.

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { store } from "./store"; import { Provider } from "react-redux"; import "./fontAwesome"; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("root") );

src/ fuente Impresionante .js

 import { library } from "@fortawesome/fontawesome-svg-core"; import { faGithubAlt, faGoogle, faFacebook, faTwitter, faJediOrder, } from "@fortawesome/free-brands-svg-icons"; library.add(faGithubAlt, faGoogle, faFacebook, faTwitter, faJediOrder);

src/ tienda .js

Una tienda contiene todo el árbol de estado de su aplicación.

La única forma de cambiar el estado interior es enviar una acción sobre él. La tienda luego pasará el nuevo estado recibido del reductor al componente.

 import thunkMiddleware from "redux-thunk"; import { createStore, applyMiddleware } from "redux"; import reducer from "./reducer"; export const store = createStore(reducer, applyMiddleware(thunkMiddleware));

src/ datos .js

 [ { "id": 1, "name": "Daniel", "email": "[email protected]", "post": "I love football", "votes": 5 } ]

src/ Aplicación .js

Importamos los siguientes ganchos de react-redux: useSelector y useDispatch .

useSelector es una función que toma el estado actual como argumento y devuelve los datos que desea de él y le permite almacenar los valores devueltos dentro de una variable dentro del alcance de sus componentes funcionales en lugar de pasarlos como accesorios.

useDispatch es equivalente a mapDispatchToProps . useDispatch y lo almacenaremos en una variable, dispatch. Este enlace devuelve una referencia a la función de despacho de la tienda Redux.

Puede usarlo para enviar acciones según sea necesario. Y lo despachamos llamando a dispatch pasando el valor de retorno del creador de la acción.

 import React, { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { requestUsers } from "./action"; import data from "./data.json"; import "./App.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const App = () => { const { usersData, isLoading } = useSelector((state) => state); const dispatch = useDispatch(); useEffect(() => { dispatch(requestUsers(data)); }, []); return ( <> {isLoading && <div className="loading">Data loading...</div>} {usersData.map((user) => { return ( <div key={user.id} className="container"> <div className="content"> <h1>{user.name}</h1> <span>{user.email}</span> <h3>{user.post}</h3> Votes: {user.votes} {user.votes >= 5 ? ( <div> <FontAwesomeIcon icon={["fab", "jedi-order"]} size="3x" /> </div> ) : ( <p>Get up to five votes to have a badge</p> )} </div> </div> ); })} </> ); }; export default App;

Resumen del flujo de trabajo de React-Redux

Redux es un contenedor de estado predecible para javascript.

Entonces, en un flujo de datos redux, tenemos la aplicación javascript, que es el estado de la aplicación que se mantiene en la tienda redux; sin embargo, la aplicación no puede actualizar el estado directamente, usa una acción o envía una acción para mantener el estado. una vez que se ha enviado la acción, el reductor maneja la acción y actualiza la tienda actual.

Redux es muy útil en una aplicación de página única (SPA), porque produce una única fuente de verdad. Redux tiene una tienda, la tienda es un objeto que contiene todo el estado de su aplicación. Las diferentes piezas de estados se almacenan en un árbol de objetos.

Para leer más sobre React-Redux, puede consultar esta documentación .

¡Feliz codificación!