[React / Redux] mis reducers están devolviendo un objeto vacío y mi consola devuelve un error GET 500 (Internal Server Error)
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.