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

1GET 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:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './components/App';
4import "./styles/styles.scss"
5import store from "./redux/store";
6import {Provider} from "react-redux";
7
8
9
10ReactDOM.render(
11  <React.StrictMode>
12    <Provider store={store}>
13      <App />
14    </Provider>
15  </React.StrictMode>,
16  document.getElementById('root')
17);

App.jsx:

1import React from 'react';
2import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
3import Home from "./Pages/Home";
4import Protected from "./Routes/Protected";
5import Specialities from "./Pages/Specialities";
6import Speciality from "./Pages/Speciality";
7import Courses from "./Pages/Courses";
8import Course from "./Pages/Course";
9import Teachers from "./Pages/Teachers";
10import Fragment from "./Pages/Fragment";
11import Public from "./Routes/Public";
12import Login from "./Pages/Login";
13import Register from "./Pages/Register";
14import Page404 from "./Pages/Page404";
15import Header from "./Organisms/Header";
16
17const App = () => (
18    <Router>
19      <Header />
20      <Switch>
21        <Protected path="/" exact component={Home} />
22        <Protected path="/specialities" exact component={Specialities} />
23        <Protected path="/specialities/:id" component={Speciality} />
24        <Protected path="/courses" exact component={Courses} />
25        <Protected path="/courses/:id" component={Course} />
26        <Protected path="/teachers" exact component={Teachers} />
27        <Protected path="/lessons/:id" component={Fragment} />
28
29        <Public path="/login" exact component={Login} />
30        <Public path="/register" exact component={Register} />
31
32        <Route component={Page404} />
33      </Switch>
34    </Router>
35)
36
37export default App;

actionCreators.js:

1import Axios from "axios";
2import {
3  GET_ALL_COURSES,
4  GET_ALL_POSTS,
5  GET_ALL_SPECIALITIES,
6  GET_ALL_TEACHERS, GET_COURSE, GET_FRAGMENT, GET_POST,
7  GET_SPECIALITY
8} from "./actions";
9
10const API_URL = process.env.REACT_APP_API_URL
11
12export const getAllPosts = () => dispatch => {
13  Axios.get(`${API_URL}/posts`).then(
14    resp => {
15      return dispatch({
16        type: GET_ALL_POSTS,
17        posts: resp.data
18      })
19    }
20  )
21}
22
23export const getAllSpecialities = () => dispatch => {
24  Axios.get(`${API_URL}/specialities`).then(
25    resp => {
26      return dispatch({
27        type: GET_ALL_SPECIALITIES,
28        specialities: resp.data
29      })
30    }
31  )
32}
33
34export const getAllCourses = () => dispatch => {
35  Axios.get(`${API_URL}/courses`).then(
36    resp => {
37      return dispatch({
38        type: GET_ALL_COURSES,
39        courses: resp.data
40      })
41    }
42  )
43}
44
45export const getAllTeachers = () => dispatch => {
46  Axios.get(`${API_URL}/teachers`).then(
47    resp => {
48      return dispatch({
49        type: GET_ALL_TEACHERS,
50        teachers: resp.data
51      })
52    }
53  )
54}
55
56export const getPost = id => dispatch => {
57  Axios.get(`${API_URL}/posts/${id}`).then(
58    resp => {
59      return dispatch({
60        type: GET_POST,
61        post: resp.data
62      })
63    }
64  )
65}
66
67export const getSpeciality = id => dispatch => {
68  Axios.get(`${API_URL}/specialities/${id}`).then(
69    resp => {
70      return dispatch({
71        type: GET_SPECIALITY,
72        speciality: resp.data
73      })
74    }
75  )
76}
77
78export const getCourse = id => dispatch => {
79  Axios.get(`${API_URL}/courses/${id}`).then(
80    resp => {
81      return dispatch({
82        type: GET_COURSE,
83        course: resp.data
84      })
85    }
86  )
87}
88
89export const getFragment = id => dispatch => {
90  Axios.get(`${API_URL}/lessons/${id}`).then(
91    resp => {
92      return dispatch({
93        type: GET_FRAGMENT,
94        fragment: resp.data
95      })
96    }
97  )
98}

reducers.js:

1import {
2  GET_ALL_COURSES,
3  GET_ALL_POSTS,
4  GET_ALL_SPECIALITIES,
5  GET_ALL_TEACHERS,
6  GET_COURSE, GET_FRAGMENT,
7  GET_POST,
8  GET_SPECIALITY
9} from "./actions";
10
11export const postReducer = (state = {},  action) => {
12  if (action.type === GET_ALL_POSTS) {
13    return {
14      ...state,
15      posts: action.posts
16    }
17  }
18
19  if (action.type === GET_POST) {
20    return {
21      ...state,
22      post: action.post
23    }
24  }
25  return state
26}
27
28export const specialityReducer = (state = {},  action) => {
29  if (action.type === GET_ALL_SPECIALITIES) {
30    return {
31      ...state,
32      specialities: action.specialities
33    }
34  }
35
36  if (action.type === GET_SPECIALITY) {
37    return {
38      ...state,
39      speciality: action.speciality
40    }
41  }
42  return state
43}
44
45export const courseReducer = (state = {},  action) => {
46  if (action.type === GET_ALL_COURSES) {
47    return {
48      ...state,
49      courses: action.courses
50    }
51  }
52
53  if (action.type === GET_COURSE) {
54    return {
55      ...state,
56      course: action.course
57    }
58  }
59  return state
60}
61
62export const teacherReducer = (state = {},  action) => {
63  if (action.type === GET_ALL_TEACHERS) {
64    return action.teachers
65  }
66  return state
67}
68
69export const fragmentReducer = (state = {},  action) => {
70  if (action.type === GET_FRAGMENT) {
71    return {
72      ...state,
73      fragment: action.fragment
74    }
75  }
76  return state
77}

Esta es mi variable de entorno llamada REACT_APP_API_URL:

1REACT_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.