1

estoy aprendiendo React haciendo un clon de spotify y por ahora lo que estoy intentando hacer es mostrar secciones de spotify tales como "las ultimas canciones reproducidas", "top artistas" y "top canciones" mediante un componente llamado Body.js

Yo la data la obtengo desde una libreria de la API oficial de spotify creada por jmperez en un useEffect hook en el componente App.js. Una vez que consigo la data de la API, la guardo en un objeto llamado initialState en un archivo llamado reducer.js

Este archivo reducer.js contiene el estado inicial y la funcion reducer para un custom hook llamado useDataLayer.js que basicamente es un useContext hook que pasa como valor un useReducer a todas las ramas de mi programa. De esta forma yo lo que hago es actualizar el initialState desde App.js y accedo a este objeto mediante el useDataLayer hook en las distintas ramas de mi programa (entre ellas el componente Body).

El problema que estoy teniendo ahora es que no me esta renderizando las tres secciones yantes mencionadas en spotify, sino que solo me muestra una la cual es la de "top canciones". Lo raro es que por un segundo si renderiza los otros componentes como si en un principio si obtuviera la data y se renderizara pero luego se actualiza y desaparecen. Por favor si alguien me puede ayudar con este problema y me explica porque sucede esto seria genial.

Codigo de App.js

import React, {useState, useEffect} from 'react';
import Login from './components/Login';
import Player from './components/Player';
import { getTokenFromResponse } from './spotify';
import './styles/App.scss';
import SpotifyWebApi from "spotify-web-api-js";
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { useDataLayer } from './components/Hooks/useDataLayer';

library.add(fas, fab);


//instancia de la libreria de spotify
const spotify = new SpotifyWebApi();

function App() {

  const [token, setToken] = useState(null);
  const [{ user }, dispatch] = useDataLayer();

  //donde obtengo la data necesaria de la api
  useEffect(() => {
    //funcion para obtener token de acceso
    let accessToken = getTokenFromResponse();
    window.location.hash = '';

    if(accessToken){
      spotify.setAccessToken(accessToken);
      setToken(accessToken);

      //A PARTIR DE AQUI OBTENGO LA DATA QUE NECESITO
      
      // aqui obtengo la data de mi usuario
      spotify.getMe().then((data) =>{
        dispatch({
          type: "GET_USER",
          user: data
        })
      });
      
      spotify.getUserPlaylists().then((data) => {
        dispatch({
            type: "GET_PLAYLISTS",
            playlists: data
        })
      });
      
      spotify.getMyTopTracks({limit: 4}).then((data) => {
        dispatch({
          type: "GET_TOP_TRACKS",
          top_tracks: data,
        })
      });

      spotify.getMyRecentlyPlayedTracks({limit: 4}).then((data) => {
        dispatch({
            type: "RECENTLY_PLAYED",
            recently_played: data,
        })
      });

      spotify.getMyTopArtists({limit: 4}).then((data) => {
        dispatch({
          type: "GET_TOP_ARTISTS",
          top_artists: data,
        })
      });
    }
  }, [token])

  //si token es valido ingresa a Player.js donde dentro se encuentra Body.js y sino vuelve al componente login
  return (
    
      <div className="App">
        {token ? <Player spotify= {spotify} /> : <Login />}
      </div>
  );
}

export default App;

Codigo Body.js

import React from 'react'
import '../styles/Body.scss'
import { useDataLayer } from "./Hooks/useDataLayer.js";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

function Body({ spotify }) {

    //obtengo las propiedades de la data necesaria que quiero mostrar en este componente con useDataLayer
    const [{ spotify_recommendations, recently_played,  top_tracks, top_artists }, dispatch] = useDataLayer();
   
    return (
        <div className= "main-body">
            <div className= "body-option">
                <span className= "see-more">Ver Todos</span>
                <FontAwesomeIcon icon={['fas', 'arrow-right']} />
                <div>
                    {
                        //para mostrar la imagen e info del track
                        recently_played?.items.map((item, index) => {
                            return (
                                <div className= "track" key= {index}>
                                    <img src= {item.track.album.images[1].url} alt= "recently played track"></img>
                                    <div className= "track-data">
                                        <h3>{item.track.name}</h3>
                                        <p>{item.track.artists.map(artist => artist.name).join(", ")}</p>
                                    </div>
                                    
                                </div>
                            )
                        })
                        
                    }
                </div>
            </div>
            <div className= "body-option">
                <span className= "see-more">Ver Todos</span>
                <FontAwesomeIcon icon={['fas', 'arrow-right']} />
                <div>
                    {
                        //para mostrar la imagen e info del track
                       top_tracks?.items.map((topArtist, index) => {
                            return (
                                <div className= "track" key= {index}>
                                    <img src= {topArtist.album.images[1].url} alt= "recently played track"></img>
                                    <div className= "track-data">
                                        <h3>{topArtist.name}</h3>
                                        <p>{topArtist.artists.map(artist => artist.name).join(", ")}</p>
                                    </div>
                                    
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className= "body-option">
                <span className= "see-more">Ver Todos</span>
                <FontAwesomeIcon icon={['fas', 'arrow-right']} />
                <div>
                    {
                        //para mostrar la imagen e info del artista
                         top_artists?.items.map((topTrack, index) => {
                            return (
                                <div className= "track" key= {index}>
                                    <img src= {topTrack.images[1].url} alt= "recently played track"></img>
                                    <div className= "track-data">
                                        <h3>{topTrack.name}</h3>
                                        <p>{topTrack.genres.join(", ")}</p>
                                    </div>
                                    
                                </div>
                            )
                        })   
                    }
                </div>
            </div>
        </div>
    )
}

export default Body

Codigo de mi custom hook useDataLayer.js

import React, {useContext, createContext, useReducer} from 'react'

let DataContext = createContext();

export function DataLayer({reducer, initialState, children}) {
    return (
        <DataContext.Provider value= {useReducer(reducer, initialState)}>
            {children}
        </DataContext.Provider>
    )
}

export let useDataLayer = () => useContext(DataContext);

reducer.js

export const initialState = {
    user: null,
    top_tracks: null,
    top_artists: null,
    top_albums: null,
    playlists: [],
    playlists_tracks: [],
    playing: false,
    spotify_recommendations: null,
    recently_played: null,
    item: null,
}

const reducer = (action, state) => {
    switch (action.type) {
        
        case "GET_PLAYLISTS":
            return {
                ...state,
                playlists: action.playlists,
            };

        case "GET_PLAYLISTS_TRACKS":
            return {
                ...state,
                playlists_tracks: action.playlists_tracks,
            };
        case "GET_USER":
            return{
                ...state,
                user: action.user,
            };
        case "GET_TOP_ARTISTS":
            return{
                 ...state,
                top_artists: action.top_artists,
            };
        case "GET_TOP_ALBUMS":
            return{
                ...state,
                top_albums: action.top_albums,
            };
        case "GET_TOP_TRACKS":
            return{
                ...state,
                top_tracks: action.top_tracks,
            };
        case "GET_RECOMMENDED":
            return{
                ...state,
                spotify_recommendations: action.get_recomended,
            }
        case "RECENTLY_PLAYED":
            return {
                ...state,
                recently_played: action.recently_played,
            }
        default:
            return state;
    }
}

export default reducer;

Desde ya muchas gracias por su tiempo y atencion.

10
  • 1
    Estoy aprendiendo react también, no me animo a dar una respuesta pero se me hace raro cuando dentro del useEffect de tu función app haces if(accessToken) ... setToken(accessToken) y finalmente le pasas como segundo parametro del useEfect [accessToken]. Entiendo que ese segundo parámetro le dice al hook que se ejecute cada vez que accessToken cambie, y el hook está cambiando el token por el simple hecho de no ser null. Eso no sería un loop infinito? o le estoy errando?
    – Agustin G.
    el 6 may. 2022 a las 0:19
  • 1
    Entiendo que si le pasas un array vacío [] en lugar de [accessToken], el hook solo se va a ejecutar cuando se monte el componente. Y creería que es eso lo que necesitas.
    – Agustin G.
    el 6 may. 2022 a las 0:20
  • Hola agustin, primero que nada gracias por responder y con respecto a tu consulta mira la API de spotify se maneja con un token de acceso, que en mi codigo seria accesToken, que cuando vos accedes a tu cuenta te da este token que la API necesita para saber de que cuenta sacar la data. Entonces yo necesito que tenga en cuenta el useEffect el token porque cuando este cambie, ya que no siempre va a ser el mismo, re renderize todos lo componentes.
    – FERRE FACU
    el 6 may. 2022 a las 13:33
  • Hola Facu, entonces no te está generando un loop infinito eso? Yo entiendo que 1) Se carga la aplicacion y se ejecuta el useEffect - 2) En la primer linea del useEffect obtenes un accessToken -3) dos lineas despues preguntas "Si existe accesToken" (te da true siempre, pues acaba de obtenerlo, no?) -4) Si el token existe, haces spotify.setAccessToken(accessToken); setToken(accessToken);. PREGUNTA: En este momento, cuando volves a setear el accessToken, no deberia volver a ejecutarse este useEffect? (por el segundo parametro) A partir de ahi, si la respuesta es sí, tenés un loop infinito.
    – Agustin G.
    el 6 may. 2022 a las 14:45
  • De todas maneras es la unica observacion que puedo hacer, soy muy novato con esta libreria. Espero que tengas solucion pronto. Saludos.
    – Agustin G.
    el 6 may. 2022 a las 14:46

1 respuesta 1

1

Creo que necesitas cambiar la lógica de tu programa. Al esperar esto:

  //A PARTIR DE AQUI OBTENGO LA DATA QUE NECESITO
  
  // aqui obtengo la data de mi usuario
  spotify.getMe().then((data) =>{
    dispatch({
      type: "GET_USER",
      user: data
    })
  });
  
  spotify.getUserPlaylists().then((data) => {
    dispatch({
        type: "GET_PLAYLISTS",
        playlists: data
    })
  });
  
  spotify.getMyTopTracks({limit: 4}).then((data) => {
    dispatch({
      type: "GET_TOP_TRACKS",
      top_tracks: data,
    })
  });

  spotify.getMyRecentlyPlayedTracks({limit: 4}).then((data) => {
    dispatch({
        type: "RECENTLY_PLAYED",
        recently_played: data,
    })
  });

  spotify.getMyTopArtists({limit: 4}).then((data) => {
    dispatch({
      type: "GET_TOP_ARTISTS",
      top_artists: data,
    })
  });

Los datos que esperas llegan en momentos diferentes. Pues son promesas (asincrónicas).

Cuando solo una de las variables haya cambiado en el reducer, el hook:

const [{ spotify_recommendations, recently_played, top_tracks, top_artists }, dispatch] = useDataLayer();

se pone en efecto. Los otros probablemente tienen definiciones de undefined, y probablemente eso explica porque solamente una variable tiene referente.

En estas circunstancias, en mi reducer yo crearía un sistema de tokens para el conjunto de datos que estoy esperando, y cuando llega el conjunto entero, mando a cambiar la variable de un hook. Cuando tal variable cambia a true o 'listo/ready', la cambio a falso en un useEffect, que por su vez pide el conjunto de datos y hace algo con ellos.

3
  • Osea vos decis de que en mi reducer (que ahora agrego en la pregunta), tenga una propiedad que me diga que cuando consiguio, osea que es true, todos los datos recien ahi los actualice en el initialState y cuando este en el useEffect antes de conseguir los datos lo ponga en false para que los consiga?
    – FERRE FACU
    el 9 may. 2022 a las 20:50
  • 1
    Sí, (1) en el reducer, necesitar gestionar, digamos, la llegada de las 4 variables/propiedades. (2) cuando hayan llegado las 4 (puedes usar un array que deba llegar a la suma de 4, digamos), cambias el valor de la variable que monitorea el hook de tu script a true, y (3) construyes tu component/ui.. el 9 may. 2022 a las 22:15
  • +1 @JoeCollentine muy buena respuesta y bien explicada el 10 may. 2022 a las 10:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.