Creación de una aplicación web con React, Redux y Sanity.io

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • SmashingConf UX y diseño, Amberes 2024

  • Índice
    1. Comenzando con Sanity.io #
    2. Comunicación bidireccional Sanity-React #
      1. Configuración de orígenes de CORS en Sanity Manager #
      2. Conectando la cordura para reaccionar #
    3. Configurar y conectar Redux a nuestra aplicación #
      1. Configurar la tienda #
    4. Introducción al lenguaje GROQ de Sanity #
      1. Configurando las acciones #

    Headless CMS es una forma potente y sencilla de administrar contenido y acceder a API. Construido sobre React, Sanity.io es una herramienta perfecta para la gestión de contenido flexible. Se puede utilizar para crear aplicaciones desde simples hasta complejas desde cero. En este artículo, Ifeanyi explica cómo crear una aplicación de listado sencilla con Sanity.io y React. Los estados globales se gestionarán con Redux y la aplicación se diseñará con componentes con estilo.

     

    La rápida evolución de las plataformas digitales ha impuesto serias limitaciones a los CMS tradicionales como WordPress. Estas plataformas están acopladas, son inflexibles y se centran en el proyecto, más que en el producto. Afortunadamente, se han desarrollado varios CMS sin cabeza para abordar estos desafíos y muchos más.

    A diferencia del CMS tradicional, el CMS headless, que puede describirse como software como servicio (SaaS), se puede utilizar para desarrollar sitios web, aplicaciones móviles, pantallas digitales y mucho más. Se pueden utilizar en plataformas ilimitadas. Si está buscando un CMS que sea independiente de la plataforma, que dé prioridad al desarrollador y que ofrezca soporte multiplataforma, no necesita buscar más allá del CMS sin cabeza.

     

    Un CMS headless es simplemente un CMS sin cabeza. Aquí headse refiere al frontend o la capa de presentación, mientras que se bodyrefiere al backend o al repositorio de contenido. Esto ofrece muchos beneficios interesantes. Por ejemplo, permite al desarrollador elegir cualquier interfaz de su elección y también puede diseñar la capa de presentación como desee.

    Hay muchos CMS sin cabeza, algunos de los más populares incluyen Strapi, Contentful, Contentstack, Sanity, Butter CMS, Prismic, Storyblok, Directus, etc. Estos CMS sin cabeza están basados ​​en API y tienen sus puntos fuertes individuales. Por ejemplo, CMS como Sanity, Strapi, Contentful y Storyblok son gratuitos para proyectos pequeños.

    Estos CMS sin cabeza también se basan en diferentes pilas de tecnología. Mientras que Sanity.io se basa en React.js, Storyblok se basa en Vue.js. Como desarrollador de React, esta es la razón principal por la que rápidamente me interesé en Sanity. Sin embargo, al ser un CMS sin cabeza, cada una de estas plataformas se puede conectar a cualquier interfaz, ya sea Angular, Vue o React.

    Cada uno de estos CMS sin cabeza tiene planes gratuitos y de pago que representan un aumento de precio significativo. Aunque estos planes pagos ofrecen más funciones, no querrás pagar tanto por un proyecto pequeño o mediano. Sanity intenta resolver este problema introduciendo opciones de pago por uso. Con estas opciones podrás pagar por lo que uses y evitar el salto de precio.

    Otra razón por la que elijo Sanity.io es su lenguaje GROQ. Para mí, Sanity se destaca entre la multitud al ofrecer esta herramienta. Las consultas de objetos gráfico-relacionales (GROQ) reducen el tiempo de desarrollo, le ayudan a obtener el contenido que necesita en la forma que lo necesita y también ayudan al desarrollador a crear un documento con un nuevo modelo de contenido sin cambios de código.

    Además, los desarrolladores no están limitados al lenguaje GROQ. También puedes usar GraphQL o incluso el tradicional axiosy fetchen tu aplicación React para consultar el backend. Como la mayoría de los otros CMS sin cabeza, Sanity tiene documentación completa que contiene consejos útiles para desarrollar la plataforma.

    Nota: este artículo requiere conocimientos básicos de React, Redux y CSS.

    Comenzando con Sanity.io #

    Para utilizar Sanity en su máquina, deberá instalar la herramienta Sanity CLI. Si bien esto se puede instalar localmente en su proyecto, es preferible instalarlo globalmente para que sea accesible para aplicaciones futuras.

     

    Para hacer esto, ingrese los siguientes comandos en su terminal.

    npm install -g @sanity/cli

    La -gbandera en el comando anterior habilita la instalación global.

    A continuación, necesitamos inicializar Sanity en nuestra aplicación. Aunque esto se puede instalar como un proyecto separado, generalmente es preferible instalarlo dentro de su aplicación frontend (en este caso React).

    En su blog , Kapehe explicó en detalle cómo integrar Sanity con React. Será útil leer el artículo antes de continuar con este tutorial.

    Ingrese los siguientes comandos para inicializar Sanity en su aplicación React.

    sanity init

    El sanitycomando estará disponible para nosotros cuando instalamos la herramienta Sanity CLI. Puede ver una lista de los comandos de Sanity disponibles escribiendo sanityo sanity helpen su terminal.

    Al configurar o inicializar su proyecto, deberá seguir las instrucciones para personalizarlo. También se le pedirá que cree un conjunto de datos e incluso podrá elegir su conjunto de datos personalizado lleno de datos. Para esta aplicación de listado, utilizaremos el conjunto de datos de películas de ciencia ficción personalizados de Sanity. Esto nos evitará tener que introducir nosotros mismos los datos.

    Para ver y editar su conjunto de datos, cdvaya al subdirectorio Sanity en su terminal e ingrese sanity start. Esto generalmente continúa https://localhost:3333/. Es posible que deba iniciar sesión para acceder a la interfaz (asegúrese de iniciar sesión con la misma cuenta que utilizó al inicializar el proyecto). A continuación se muestra una captura de pantalla del entorno.

    Una descripción general del servidor de cordura para el conjunto de datos de películas de ciencia ficción. ( Vista previa grande )

    Comunicación bidireccional Sanity-React #

    Sanity y React necesitan comunicarse entre sí para una aplicación completamente funcional.

    Configuración de orígenes de CORS en Sanity Manager #

    Primero conectaremos nuestra aplicación React a Sanity. Para hacer esto, inicie sesión https://manage.sanity.io/y ubíquese CORS originsdebajo API Settingsen la Settingspestaña. Aquí, deberá conectar el origen de su interfaz al backend de Sanity. Nuestra aplicación React se ejecuta https://localhost:3000/de forma predeterminada, por lo que debemos agregarla al CORS.

    Esto se muestra en la siguiente figura.

    Configuración del origen de CORS en Sanity.io Manager. ( Vista previa grande )

    Conectando la cordura para reaccionar #

    Sanity asocia un project IDa cada proyecto que creas. Esta identificación es necesaria al conectarlo a su aplicación frontend. Puede encontrar el ID del proyecto en su Sanity Manager.

    El backend se comunica con React mediante una biblioteca conocida como sanity client. Debe instalar esta biblioteca en su proyecto Sanity ingresando los siguientes comandos.

    npm install @sanity/client

    Cree un archivo sanitySetup.js(el nombre del archivo no importa) en srcla carpeta de su proyecto e ingrese los siguientes códigos de React para configurar una conexión entre Sanity y React.

     

    import sanityClient from "@sanity/client"export default sanityClient({ projectId: PROJECT_ID, dataset: DATASET_NAME, useCdn: true});

    Pasamos nuestro projectIdy dataset nameun booleano useCdna la instancia del cliente de cordura importado desde @sanity/client. Esto hace la magia y conecta nuestra aplicación al backend.

    Ahora que hemos completado la conexión bidireccional, comencemos a construir nuestro proyecto.

    Configurar y conectar Redux a nuestra aplicación #

    Necesitaremos algunas dependencias para trabajar con Redux en nuestra aplicación React. Abra su terminal en su entorno React e ingrese los siguientes comandos bash.

    npm install redux react-redux redux-thunk

    Redux es una biblioteca de gestión de estado global que se puede utilizar con la mayoría de los marcos y bibliotecas frontend como React. Sin embargo, necesitamos una herramienta intermediaria react-reduxpara permitir la comunicación entre nuestra tienda Redux y nuestra aplicación React. El procesador Redux nos ayudará a devolver una función en lugar de un objeto de acción de Redux.

    Si bien podríamos escribir todo el flujo de trabajo de Redux en un solo archivo, a menudo es más ordenado y mejor separar nuestras preocupaciones. Para esto, dividiremos nuestro flujo de trabajo en tres archivos, a saber, actions, reducersy luego el store. Sin embargo, también necesitamos un archivo separado para almacenar el action types, también conocido como constants.

    Configurar la tienda #

    La tienda es el archivo más importante en Redux. Organiza y empaqueta los estados y los envía a nuestra aplicación React.

    Aquí está la configuración inicial de nuestra tienda Redux necesaria para conectar nuestro flujo de trabajo de Redux.

    import { createStore, applyMiddleware } from "redux";import thunk from "redux-thunk";import reducers from "./reducers/";export default createStore( reducers, applyMiddleware(thunk));

    La createStorefunción en este archivo toma tres parámetros: reducer(obligatorio), el estado inicial y el potenciador (normalmente un middleware, en este caso, thunksuministrado a través de applyMiddleware). Nuestros reductores se almacenarán en una reducerscarpeta y los combinaremos y exportaremos en un index.jsarchivo en la reducerscarpeta. Este es el archivo que importamos en el código anterior. Revisaremos este archivo más tarde.

    • Aproveche la sólida recuperación de datos y el tamaño de paquete optimizado con KendoReact Server Data Grid Probar ahora

    Introducción al lenguaje GROQ de Sanity #

    Sanity lleva la consulta de datos JSON un paso más allá al presentar GROQ. GROQ significa Consultas de objetos relacionales gráficos. Según Sanity.io , GROQ es un lenguaje de consulta declarativo diseñado para consultar colecciones de documentos JSON en gran medida sin esquemas.

     

    Sanity incluso proporciona GROQ Playground para ayudar a los desarrolladores a familiarizarse con el lenguaje. Sin embargo, para acceder al área de juegos, es necesario instalar Sanity Vision . Ejecute sanity install @sanity/visionen su terminal para instalarlo.

    GROQ tiene una sintaxis similar a GraphQL pero es más condensada y más fácil de leer. Además, a diferencia de GraphQL, GROQ se puede utilizar para consultar datos JSON.

    Por ejemplo, para recuperar todos los elementos de nuestro documento de película, usaremos la siguiente sintaxis GROQ.

    *[_type == "movie"]

    Sin embargo, si deseamos recuperar solo el _idsy crewMembersen nuestro documento de película. Necesitamos especificar esos campos de la siguiente manera.

    `*[_type == 'movie']{ _id, crewMembers}

    Aquí solíamos *decirle a GROQ que queremos todos los documentos de _typela película. _typees un atributo de la colección de películas. También podemos devolver el tipo como lo hicimos con _idy crewMembersde la siguiente manera:

    *[_type == 'movie']{ _id, _type, crewMembers}

    Trabajaremos más en GROQ implementándolo en nuestras acciones de Redux, pero puede consultar la documentación de Sanity.io para GROQ para obtener más información al respecto. La hoja de referencia de consultas de GROQ proporciona muchos ejemplos que le ayudarán a dominar el lenguaje de consulta.

    Configurar constantes

    Necesitamos constantes para rastrear los tipos de acciones en cada etapa del flujo de trabajo de Redux. Las constantes ayudan a determinar el tipo de acción enviada en cada momento. Por ejemplo, podemos rastrear cuándo se está cargando la API, cuándo está completamente cargada y cuándo ocurre un error.

    No necesariamente necesitamos definir constantes en un archivo separado, pero por simplicidad y claridad, esta suele ser la mejor práctica en Redux.

    Por convención, las constantes en Javascript se definen en mayúsculas. Seguiremos las mejores prácticas aquí para definir nuestras constantes. A continuación se muestra un ejemplo de una constante para indicar solicitudes de recuperación de películas en movimiento.

    export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST";

    Aquí, creamos una constante MOVIE_FETCH_REQUESTque denota un tipo de acción de MOVIE_FETCH_REQUEST. Esto nos ayuda a llamar fácilmente a este tipo de acción sin usar stringsy evitar errores. También exportamos la constante para que esté disponible en cualquier parte de nuestro proyecto.

    De manera similar, podemos crear otras constantes para recuperar tipos de acciones que indiquen cuándo la solicitud tiene éxito o falla. movieConstants.jsEn el siguiente código se proporciona un código completo para . Mejores Opiniones y reviews

     

    export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST";export const MOVIE_FETCH_SUCCESS = "MOVIE_FETCH_SUCCESS";export const MOVIE_FETCH_FAIL = "MOVIE_FETCH_FAIL";export const MOVIES_FETCH_REQUEST = "MOVIES_FETCH_REQUEST";export const MOVIES_FETCH_SUCCESS = "MOVIES_FETCH_SUCCESS";export const MOVIES_FETCH_FAIL = "MOVIES_FETCH_FAIL";export const MOVIES_FETCH_RESET = "MOVIES_FETCH_RESET";export const MOVIES_REF_FETCH_REQUEST = "MOVIES_REF_FETCH_REQUEST";export const MOVIES_REF_FETCH_SUCCESS = "MOVIES_REF_FETCH_SUCCESS";export const MOVIES_REF_FETCH_FAIL = "MOVIES_REF_FETCH_FAIL";export const MOVIES_SORT_REQUEST = "MOVIES_SORT_REQUEST";export const MOVIES_SORT_SUCCESS = "MOVIES_SORT_SUCCESS";export const MOVIES_SORT_FAIL = "MOVIES_SORT_FAIL";export const MOVIES_MOST_POPULAR_REQUEST = "MOVIES_MOST_POPULAR_REQUEST";export const MOVIES_MOST_POPULAR_SUCCESS = "MOVIES_MOST_POPULAR_SUCCESS";export const MOVIES_MOST_POPULAR_FAIL = "MOVIES_MOST_POPULAR_FAIL";

    Aquí hemos definido varias constantes para buscar una película o una lista de películas, ordenar y buscar las películas más populares. Observe que configuramos constantes para determinar cuándo es la solicitud loadingy successful.failed

    De manera similar, nuestro personConstants.jsarchivo se proporciona a continuación:

    export const PERSONS_FETCH_REQUEST = "PERSONS_FETCH_REQUEST";export const PERSONS_FETCH_SUCCESS = "PERSONS_FETCH_SUCCESS";export const PERSONS_FETCH_FAIL = "PERSONS_FETCH_FAIL";export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";export const PERSON_FETCH_FAIL = "PERSON_FETCH_FAIL";export const PERSONS_COUNT = "PERSONS_COUNT";

    Al igual que movieConstants.js, establecemos una lista de constantes para buscar una persona o personas. También establecemos una constante para contar personas. Las constantes siguen la convención descrita movieConstants.jsy también las exportamos para que sean accesibles a otras partes de nuestra aplicación.

    Finalmente, implementaremos el modo claro y oscuro en la aplicación y así tendremos otro archivo de constantes globalConstants.js. Echemos un vistazo.

    export const SET_LIGHT_THEME = "SET_LIGHT_THEME";export const SET_DARK_THEME = "SET_DARK_THEME";

    Aquí establecemos constantes para determinar cuándo se envía el modo claro u oscuro. SET_LIGHT_THEMEdetermina cuándo el usuario cambia al tema claro y SET_DARK_THEMEdetermina cuándo se selecciona el tema oscuro. También exportamos nuestras constantes como se muestra.

    Configurando las acciones #

    Por convención, nuestras acciones se almacenan en una carpeta separada. Las acciones se agrupan según sus tipos. Por ejemplo, las acciones de nuestra película se almacenan movieActions.jsmientras que las acciones de nuestra persona se almacenan en personActions.jsun archivo.

    También tenemos globalActions.jsque encargarnos de cambiar el tema del modo claro al modo oscuro.

    Busquemos todas las películas en formato moviesActions.js.

    import sanityAPI from "../../sanitySetup";import { MOVIES_FETCH_FAIL, MOVIES_FETCH_REQUEST, MOVIES_FETCH_SUCCESS } from "../constants/movieConstants";const fetchAllMovies = () = async (dispatch) = { try { dispatch({ type: MOVIES_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie']{ _id, "poster": poster.asset-url, } ` ); dispatch({ type: MOVIES_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_FETCH_FAIL, payload: error.message }); }};

    ¿Recuerdas cuando creamos el sanitySetup.jsarchivo para conectar React a nuestro backend de Sanity? Aquí, importamos la configuración para permitirnos consultar nuestro backend de cordura usando GROQ. También importamos algunas constantes exportadas desde el movieConstants.jsarchivo en la constantscarpeta.

     

    A continuación, creamos la fetchAllMoviesfunción de acción para buscar cada película de nuestra colección. La mayoría de las aplicaciones React tradicionales utilizan axioso fetchpara recuperar datos del backend. Pero si bien podríamos usar cualquiera de estos aquí, estamos usando Sanity GROQ. Para ingresar al GROQmodo, necesitamos llamar a sanityAPI.fetch()la función como se muestra en el código anterior. Aquí sanityAPIestá la conexión React-Sanity que configuramos anteriormente. Esto devuelve a Promisey por lo tanto debe llamarse de forma asincrónica. Hemos usado la async-awaitsintaxis aquí, pero también podemos usar la .thensintaxis.

    Como lo estamos usando thunken nuestra aplicación, podemos devolver una función en lugar de un objeto de acción. Sin embargo, optamos por pasar la declaración de devolución en una línea.

    const fetchAllMovies = () = async (dispatch) = { ...}

    Tenga en cuenta que también podemos escribir la función de esta manera:

    const fetchAllMovies = () = { return async (dispatch)={ ... }}

    En general, para recuperar todas las películas, primero enviamos un tipo de acción que rastrea cuándo la solicitud aún se está cargando. Luego utilizamos la sintaxis GROQ de Sanity para consultar de forma asincrónica el documento de la película. Recuperamos la _idURL y la del cartel de los datos de la película. Luego devolvimos una carga útil que contiene los datos obtenidos de la API.

    De manera similar, podemos recuperar películas por su _idformato, ordenarlas y obtener las más populares.

    También podemos buscar películas que coincidan con la referencia de una persona en particular. Hicimos esto en la fetchMoviesByReffunción.

    const fetchMoviesByRef = (ref) = async (dispatch) = { try { dispatch({ type: MOVIES_REF_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie' (castMembers[person._ref match '${ref}'] || crewMembers[person._ref match '${ref}']) ]{ _id, "poster" : poster.asset-url, title } ` ); dispatch({ type: MOVIES_REF_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_REF_FETCH_FAIL, payload: error.message }); }};

    Esta función toma un argumento y comprueba si person._refen castMemberso crewMemberscoincide con el argumento pasado. Devolvemos la película _id, poster url, y titleal lado. También enviamos una acción de tipo MOVIES_REF_FETCH_SUCCESS, adjuntando una carga útil de los datos devueltos, y si ocurre un error, enviamos una acción de tipo MOVIE_REF_FETCH_FAIL, adjuntando una carga útil del mensaje de error, gracias al try-catchcontenedor.

     

    En la fetchMovieByIdfunción, solíamos GROQrecuperar una película que coincide con un elemento particular idpasado a la función.

    La GROQsintaxis de la función se muestra a continuación.

    const data = await sanityAPI.fetch( `*[_type == 'movie' _id == '${id}']{ _id, "cast" : castMembers[]{ "ref": person._ref, characterName, "name": person-name, "image": person-image.asset-url } , "crew" : crewMembers[]{ "ref": person._ref, department, job, "name": person-name, "image": person-image.asset-url } , "overview": { "text": overview[0].children[0].text }, popularity, "poster" : poster.asset-url, releaseDate, title }[0]` );

    Al igual que la fetchAllMoviesacción, comenzamos seleccionando todos los documentos de tipo moviepero fuimos más allá y seleccionamos solo aquellos con una identificación proporcionada a la función. Como pretendemos mostrar muchos detalles de la película, especificamos una serie de atributos para recuperar.

    Recuperamos la película idy también algunos atributos de la castMembersmatriz, a saber ref,, characterNameel nombre de la persona y la imagen de la persona. También cambiamos el alias de castMembersa cast.

    Al igual que castMembers, seleccionamos algunos atributos de la crewMembersmatriz, a saber ref, department, job, el nombre de la persona y la imagen de la persona. También cambiamos el alias de crewMembersa crew.

    De la misma manera, seleccionamos el texto general, la popularidad, la URL del póster de la película, la fecha de estreno y el título de la película.

    El lenguaje GROQ de Sanity también nos permite ordenar un documento. Para ordenar un artículo, pasamos el pedido junto a un operador de tubería .

    Por ejemplo, si queremos ordenar las películas por releaseDateorden ascendente, podemos hacer lo siguiente.

     

    const data = await sanityAPI.fetch( `*[_type == 'movie']{ ... } | order(releaseDate, asc)` );

    Usamos esta noción en la sortMoviesByfunción para ordenar en orden ascendente o descendente.

    Echemos un vistazo a esta función a continuación.

    const sortMoviesBy = (item, type) = async (dispatch) = { try { dispatch({ type: MOVIES_SORT_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie']{ _id, "poster" : poster.asset-url, title } | order( ${item} ${type})` ); dispatch({ type: MOVIES_SORT_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_SORT_FAIL, payload: error.message }); }};

    Comenzamos enviando una acción de tipo MOVIES_SORT_REQUESTpara determinar cuándo se carga la solicitud. Luego usamos la GROQsintaxis para ordenar y recuperar datos de la moviecolección. El elemento por el que se ordenará se proporciona en la variable itemy el modo de clasificación (ascendente o descendente) se proporciona en la variable type. En consecuencia, devolvimos la iddirección URL del cartel y el título. Una vez que se devuelven los datos, enviamos una acción de tipo MOVIES_SORT_SUCCESSy, si falla, enviamos una acción de tipo MOVIES_SORT_FAIL.

    Un concepto similar GROQse aplica a la getMostPopularfunción. La GROQsintaxis se muestra a continuación.

    const data = await sanityAPI.fetch( ` *[_type == 'movie']{ _id, "overview": { "text": overview[0].children[0].text }, "poster" : poster.asset-url, title }| order(popularity desc) [0..2]` );

    La única diferencia aquí es que clasificamos las películas por popularidad en orden descendente y luego seleccionamos solo las tres primeras. Los elementos se devuelven en un índice de base cero, por lo que los primeros tres elementos son los elementos 0, 1 y 2. Si deseamos recuperar los primeros diez elementos, podríamos pasar [0..9]a la función.

    Aquí está el código completo para las acciones de la película en el movieActions.jsarchivo.

    import sanityAPI from "../../sanitySetup";import { MOVIE_FETCH_FAIL, MOVIE_FETCH_REQUEST, MOVIE_FETCH_SUCCESS, MOVIES_FETCH_FAIL, MOVIES_FETCH_REQUEST, MOVIES_FETCH_SUCCESS, MOVIES_SORT_REQUEST, MOVIES_SORT_SUCCESS, MOVIES_SORT_FAIL, MOVIES_MOST_POPULAR_REQUEST, MOVIES_MOST_POPULAR_SUCCESS, MOVIES_MOST_POPULAR_FAIL, MOVIES_REF_FETCH_SUCCESS, MOVIES_REF_FETCH_FAIL, MOVIES_REF_FETCH_REQUEST} from "../constants/movieConstants";const fetchAllMovies = () = async (dispatch) = { try { dispatch({ type: MOVIES_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie']{ _id, "poster" : poster.asset-url, } ` ); dispatch({ type: MOVIES_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_FETCH_FAIL, payload: error.message }); }};const fetchMoviesByRef = (ref) = async (dispatch) = { try { dispatch({ type: MOVIES_REF_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie' (castMembers[person._ref match '${ref}'] || crewMembers[person._ref match '${ref}']) ]{ _id, "poster" : poster.asset-url, title }` ); dispatch({ type: MOVIES_REF_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIES_REF_FETCH_FAIL, payload: error.message }); }};const fetchMovieById = (id) = async (dispatch) = { try { dispatch({ type: MOVIE_FETCH_REQUEST }); const data = await sanityAPI.fetch( `*[_type == 'movie' _id == '${id}']{ _id, "cast" : castMembers[]{ "ref": person._ref, characterName, "name": person-name, "image": person-image.asset-url } , "crew" : crewMembers[]{ "ref": person._ref, department, job, "name": person-name, "image": person-image.asset-url } , "overview": { "text": overview[0].children[0].text }, popularity, "poster" : poster.asset-url, releaseDate, title }[0]` ); dispatch({ type: MOVIE_FETCH_SUCCESS, payload: data }); } catch (error) { dispatch({ type: MOVIE_FETCH_FAIL, payload: error.message }); }};const sortMoviesBy = (item, type) = async (dispatch) = { try { dispatch({ ty 




    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: las características (Parte 2)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de una aplicación web con React, Redux y Sanity.io

    Creación de una aplicación web con React, Redux y Sanity.io

    Comenzando con Sanity.io #Comunicación bidireccional Sanity-React #Configurar y conectar Redux a nuestra aplicación #Introducción al lenguaje GROQ de Sanity

    programar

    es

    https://aprendeprogramando.es/static/images/programar-creacion-de-una-aplicacion-web-con-react-1085-0.jpg

    2025-01-15

     

    Creación de una aplicación web con React, Redux y Sanity.io
    Creación de una aplicación web con React, Redux y Sanity.io

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences