Hola chicos,
Tengo un problema con mis reducers, básicamente, me comunico con una api externa que construí usando Laravel y que parece funcionar perfectamente cuando la pruebo con Postman pero también después de resolver (al menos creo) los problemas de CORS Origin, si entro en la pestaña Redux de mi navegador, el estado siempre devuelve objetos vacíos y también, en el lado de React, mi consola devuelve un
bash
GET http://localhost:8000/api/teachers 500 (Internal Server Error)
error. Simplemente no puedo entender cuál es mi error, ¿alguno de ustedes podría ayudarme a encontrarlo y solucionarlo?
Estos son mis componentes:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import "./styles/styles.scss"
import store from "./redux/store";
import {Provider} from "react-redux";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
App.jsx:
php
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Pages/Home";
import Protected from "./Routes/Protected";
import Specialities from "./Pages/Specialities";
import Speciality from "./Pages/Speciality";
import Courses from "./Pages/Courses";
import Course from "./Pages/Course";
import Teachers from "./Pages/Teachers";
import Fragment from "./Pages/Fragment";
import Public from "./Routes/Public";
import Login from "./Pages/Login";
import Register from "./Pages/Register";
import Page404 from "./Pages/Page404";
import Header from "./Organisms/Header";
const App = () => (
<Router>
<Header />
<Switch>
<Protected path="/" exact component={Home} />
<Protected path="/specialities" exact component={Specialities} />
<Protected path="/specialities/:id" component={Speciality} />
<Protected path="/courses" exact component={Courses} />
<Protected path="/courses/:id" component={Course} />
<Protected path="/teachers" exact component={Teachers} />
<Protected path="/lessons/:id" component={Fragment} />
<Public path="/login" exact component={Login} />
<Public path="/register" exact component={Register} />
<Route component={Page404} />
</Switch>
</Router>
)
export default App;
actionCreators.js:
php
import Axios from "axios";
import {
GET_ALL_COURSES,
GET_ALL_POSTS,
GET_ALL_SPECIALITIES,
GET_ALL_TEACHERS, GET_COURSE, GET_FRAGMENT, GET_POST,
GET_SPECIALITY
} from "./actions";
const API_URL = process.env.REACT_APP_API_URL
export const getAllPosts = () => dispatch => {
Axios.get(`${API_URL}/posts`).then(
resp => {
return dispatch({
type: GET_ALL_POSTS,
posts: resp.data
})
}
)
}
export const getAllSpecialities = () => dispatch => {
Axios.get(`${API_URL}/specialities`).then(
resp => {
return dispatch({
type: GET_ALL_SPECIALITIES,
specialities: resp.data
})
}
)
}
export const getAllCourses = () => dispatch => {
Axios.get(`${API_URL}/courses`).then(
resp => {
return dispatch({
type: GET_ALL_COURSES,
courses: resp.data
})
}
)
}
export const getAllTeachers = () => dispatch => {
Axios.get(`${API_URL}/teachers`).then(
resp => {
return dispatch({
type: GET_ALL_TEACHERS,
teachers: resp.data
})
}
)
}
export const getPost = id => dispatch => {
Axios.get(`${API_URL}/posts/${id}`).then(
resp => {
return dispatch({
type: GET_POST,
post: resp.data
})
}
)
}
export const getSpeciality = id => dispatch => {
Axios.get(`${API_URL}/specialities/${id}`).then(
resp => {
return dispatch({
type: GET_SPECIALITY,
speciality: resp.data
})
}
)
}
export const getCourse = id => dispatch => {
Axios.get(`${API_URL}/courses/${id}`).then(
resp => {
return dispatch({
type: GET_COURSE,
course: resp.data
})
}
)
}
export const getFragment = id => dispatch => {
Axios.get(`${API_URL}/lessons/${id}`).then(
resp => {
return dispatch({
type: GET_FRAGMENT,
fragment: resp.data
})
}
)
}
reducers.js:
php
import {
GET_ALL_COURSES,
GET_ALL_POSTS,
GET_ALL_SPECIALITIES,
GET_ALL_TEACHERS,
GET_COURSE, GET_FRAGMENT,
GET_POST,
GET_SPECIALITY
} from "./actions";
export const postReducer = (state = {}, action) => {
if (action.type === GET_ALL_POSTS) {
return {
...state,
posts: action.posts
}
}
if (action.type === GET_POST) {
return {
...state,
post: action.post
}
}
return state
}
export const specialityReducer = (state = {}, action) => {
if (action.type === GET_ALL_SPECIALITIES) {
return {
...state,
specialities: action.specialities
}
}
if (action.type === GET_SPECIALITY) {
return {
...state,
speciality: action.speciality
}
}
return state
}
export const courseReducer = (state = {}, action) => {
if (action.type === GET_ALL_COURSES) {
return {
...state,
courses: action.courses
}
}
if (action.type === GET_COURSE) {
return {
...state,
course: action.course
}
}
return state
}
export const teacherReducer = (state = {}, action) => {
if (action.type === GET_ALL_TEACHERS) {
return action.teachers
}
return state
}
export const fragmentReducer = (state = {}, action) => {
if (action.type === GET_FRAGMENT) {
return {
...state,
fragment: action.fragment
}
}
return state
}
Esta es mi variable de entorno llamada REACT_APP_API_URL:
php
REACT_APP_API_URL=http://localhost:8000/api
Como dije antes, no puedo entender dónde me estoy equivocando y agradezco de antemano a cualquiera de ustedes que me ayude.
P.S. Perdón por mi muy malo español, soy italiano.
Hola a todos amigos,
Como escribí en algunas de mis publicaciones anteriores, estoy tratando de "combinar" el curso "Crear una API con Laravel" y el taller "Crear una plataforma de E-learning con Reactjs". En el lado de Laravel, tuve varios problemas de administración de CORS que ahora afortunadamente he resuelto (gracias sobre todo por su ayuda). El lado de Reactjs, por otro lado, estuvo muy bien cuando, durante la construcción de el Home, recibí este error en el navegador: "posts.map is not a function" (también adjunto una captura del error que me aparece en la consola). Creo que este error se debe al hecho de que, en mi API (construida exactamente según lo enseñado por el profesor Beto Quiroga en "Creación de una API con laravel"), los posts no están dentro de un Array, entonces, modifiqué mi código que inicialmente era esto:
<div>
{
posts.map(p =>
<
Publication
title={p.title}
author={p.author}
date={p.date}
content={p.content}
key={p.id}
/>)
}
</div>
así:
Object.keys(posts).map(
p =>
<
Publication key={posts.data.id}
title={posts.data.title}
author={posts.data.author}
date={posts.data.date}
content={posts.data.content}
/>
)
Al hacer este cambio, pensé que había resuelto todos los problemas, pero en realidad no es así porque la página de el Home no se "llena" con los datos de mi base de datos y también en mi consola, aparece esta advertencia: "each child in a list should have a unique "key" prop".
Simplemente no puedo entender dónde estoy haciendo mal ya que, si miras mi código, le di el valor "key" a mi componente "Publication" y tampoco entiendo por qué los datos de la base de datos no están "compilados" en la página.
¿podrías ayudarme a resolver estos problemas?
Gracias de antemano a cualquiera que me ayude (ahora publico prácticamente un post al día en esta comunidad, sé que realmente tienes mucha paciencia conmigo).
Saludos
Alessandro
Hola amigos, ayer intentè publicar un post sobre este mismo tema en esta comunidad, pero no sè por què no pude adjuntar las capturas de mi còdigo y creo que mi post ha sido cerrado y considerado resuelto. Lo intento de nuevo en este punto a presentar mi problema: Como dije ayer en mi post, estoy siguiendo el curso de "crear una API con laravel" y el taller "creación de una plataforma e-learning con Reactjs" y estoy tratando de "unirlos". todo parecía ir bien cuando apareció este error: "Route [login] not defined" cuando intento hacer una petición usando el método POST para mis rutas de "cursos" y "posts". Lo extraño es precisamente que este problema ocurre solo para las dos rutas que acabo de mencionar, mientras que, desde este punto de vista, todas las demás rutas funcionan perfectamente. Entonces, también tengo el problema de que, en lo que respecta a mis rutas de "teachers", "specialities" y "lessons", puedo usar el método POST y agregar datos, pero no puedo usar el método GET individual.
Este es mi archivo "api.php":
Este, sin embargo, es mi còdigo para la tabla "courses":
esta es la lista de todas mis rutas obtenidas mediante la ejecución del comando "php artisan route:list":
y finalmente, este es mi código para el archivo "Course Controller":
¿Podría alguno de ustedes ayudarme a resolver estos problemas? Gracias de antemano a cualquiera que me ayude, saludos Alessandro PD Espero haber publicado mi solicitud correctamente y de acuerdo con las reglas esta vez.
Estoy tratando de construir una sencilla API REST utilizando la última versión de laravel para una bastante simple plataforma de e-learning que estoy construyendo usando Reactjs (estoy siguiendo el curso "Construccion de una API con Laravel" y el Taller "plataforma de educaccion online con Reactjs"). Hasta ahora, todo parecía ir bien, pero luego apareció este error. Lo extraño es que este error ocurre solo en dos rutas, en cambio, todas las demás funcionan perfectamente.
Las rutas que no funcionan son "posts" y "courses", como ya he dicho, las otras funcionan bien, lo único es que, en lo que respecta a "teachers", "lessons" y "specialities", no puedo entender por qué , por ejemplo, si hago una petición con el método POST a "/ specialities/ id", no se encuentran los datos solicitados. ¿Podría alguno de ustedes ayudarme a resolver estos problemas?
Adjunto las capturas de algunos de mis archivos para que comprenda mejor los problemas que surgen (si es necesario, podría adjuntar otros).
Gracias de antemano Saludos Alessandro
Hola profesor, en primer lugar felicidades por el hermoso curso. Quería preguntarle: ¿qué curso, entre los presentes en EDteam, debería seguir para aprender cómo construir una api, almacenar el token de JWT y validarlo desde Backend? Gracias de antemano por su respuesta.
Hola amigos, hago una pregunta quizás estúpida: ¿qué curso, entre los presentes en edteam, debería seguir para aprender cómo validar tokens y peticiones a través del backend? (para entendernos, me gustaría aprender a hacer yo lo qué se hace con JWT). Espero haber hecho mi pregunta con claridad. Perdón por mi mal español, soy italiano y estoy tratando de aprender su idioma (también en esto, vosotros aquì en edteam me estas ayudando mucho, también porque su idioma, para muchas cosas, es muy similar al mío). Gracias de antemano por su ayuda a cualquiera que me responda. saludos Alessandro
Hola a todos ayer publiqué aquí en la comunidad una discusión sobre un reproductor de audio que estoy haciendo con Javascript puro lo puedes encontrar en este Codepen si quieres ver todo el código completo y me ayudaron a resolver un problema que me había ocurrido (en primer lugar, gracias de nuevo). Hoy, continuando trabajando en ello, agregué una función para hacer la reproducción aleatoria de las canciones de mi Array, la función que creé es esta:
randomSong = () => {
song.src = albumSongs[Math.floor(Math.random() * albumSongs.length)];
albumSongsTitle.textContent = albumSongs[thisSong];
song.play();
}
La aleatorización de las canciones funciona, sin embargo, no sé por qué no puedo relacionar la canción resultante con su título. Seguramente estoy haciendo algo mal en este punto de vista, pero no puedo encontrar el error. ¿Podrías echarme una mano? Gracias de antemano por siempre por toda vuestra ayuda. saludos PS. el script comienza al hacer clic en el enorme botón rojo situado en la parte inferior de la página.
Hola comunidad, he creado este codepen Codepen en el cual intenté construir un reproductor de audio con Javascript puro y debo decir que estoy satisfecho de que funcione. El único problema es que este reproductor solo funciona a partir de la segunda canción lanzada en el sentido de que si presiono play para iniciar la primera canción no se inicia. ¿Puede alguno de ustedes echarle un vistazo y ayudarme a averiguar en qué me equivoco? Gracias de antemano como siempre por toda la ayuda que me das. Saludos
Hola a todos amigos, Incluso hoy te hago una pregunta con un tema de Javascript (lo sé, lo hago prácticamente una vez al día). Como vimos durante el curso de Javacript desde cero,
.querySelectorAll(`.selector`)
no devuelve un Array sino un NodeList y aprendimos que al hacer
.prototype.slice.apply(document.querySelectorAll(`.selector`));
podemos convertirlo en Array. Entonces lo que pregunto es: porque si tengo algo como:
<section class="sections"></section>
<section class="sections"></section>
<section class="sections"></section>
<section class="sections"></section>
y por ejemplo, hago:
sections = Array.prototype.slice.apply(document.querySelectorAll(`.sections`));
alert(sections.lenght)
me devuelve undefined? ¿No debería devolverme 4 ya que lo convertí a Array? Como siempre, gracias de antemano por cualquier ayuda que me dan Ciao
Hola a todos amigos La pregunta que voy a hacerte es un poco articulada y quizás banal, pero acabo de seguir el curso de Javascript desde cero y en estos días estoy tratando de hacer mucha práctica. Ya que uso mucho Spotify (especialmente la aplicación de Android), noté que en él hay "una especie de botón regresar" que obviamente no te lleva a una página anterior (en el sentido de que no interactúa con los enlaces) pero te permite "moverte dentro de la misma aplicación" (por ejemplo, también sirve para cerrar las ventanas modales que contienen los detalles de las distintas canciones). Lo que me pregunto es: ¿Cómo se puede obtiener algo como esto? Por lo general, para crear un botón regresar con Javascript, use algo como:
.history.back();
pero, como dije, de esta manera solo puede interactuar con enlaces (al menos creo), ¿Como puede obtener, sin embargo, algo como el que describí? Espero haber logrado expresar mi pregunta lo más claramente posible y especialmente en un español lo más correcto posible. Gracias de antemano a todos por las respuestas que me dan. Saludos desde italia