如何解决React / Redux我的reducer返回一个空对象,而我的控制台返回GET 500内部服务器错误错误
我的减速器存在问题,基本上,我与使用Laravel构建的外部api通信,当我用Postman测试它,而且解决了(至少我认为)CORS之后,这似乎可以完美地工作起源问题,如果我进入浏览器的“ Redux”选项卡,则状态始终返回空对象,并且在React端,控制台也返回
GET http://localhost:8000/api/teachers 500 (Internal Server Error)
错误。我只是不明白我的错误是什么,你们中的任何人都可以帮助我找出并解决它吗?
这些是我的组件:
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:
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:
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:
import {
GET_ALL_COURSES,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
}
这是我的环境变量,称为REACT_APP_API_URL:
REACT_APP_API_URL=http://localhost:8000/api
正如我之前所说,我只是想不出哪里出了问题,在此先感谢你们中任何能帮助我的人。
P.S。对不起,我的英语不好,我是意大利语。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。