У меня есть простое приложение, в котором есть компонент Courses. В console.log печатается неопределенное (как для состояния, так и для реквизита). компонент "Курсы" выглядит следующим образом:
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { useSelector } from "react-redux";
import { styles } from "../_helpers";
import * as actions from "../_actions";
import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import { useToasts } from "react-toast-notifications";
import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, withStyles, ButtonGroup, Button } from "@material-ui/core";
export const Courses =(props)=> {
useEffect(() => {
actions.fetchAll();
}, [])//componentDidMount
console.log(props.course);//course is undefined
//toast msg.
const { addToast } = useToasts()
const onDelete = id => {
if (window.confirm('Are you sure to delete this record?'))
props.delete(id,()=>addToast("Deleted successfully", { appearance: 'info' }))
}
function handleClick(id) {
(window.alert('you want to edit?'))
}
return (
<Paper className={styles.paper} elevation={3}>
<Grid container>
<Grid item xs={6}>
{/* <CourseForm{...({ currentId, setCurrentId })}/> */}
</Grid>
<Grid item xs={6}>
<TableContainer>
{ <Table>
<TableHead className={styles.root}>
<TableRow>
<TableCell>Title</TableCell>
<TableCell>Details</TableCell>
<TableCell>Category</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{
props.courseList.map((record, index) => {
return (<TableRow key={index} hover>
<TableCell>{record.courseTitle}</TableCell>
<TableCell>{record.details}</TableCell>
<TableCell>{record.category}</TableCell>
<TableCell>
<ButtonGroup variant="text">
<Button><EditIcon color="primary"
onClick={() => handleClick(record.courseId) } /></Button>
<Button><DeleteIcon color="secondary"
onClick={() => onDelete(record.courseId)} /></Button>
</ButtonGroup>
</TableCell>
</TableRow>)
})
}
</TableBody>
</Table> }
</TableContainer>
</Grid>
</Grid>
</Paper>
);
}
const mapStateToProps = state => ({
courseList: state.course.list
})
export default connect(mapStateToProps)(withStyles(styles)(Courses));
*. CourseApi. js - как:
import axios from "axios";
const baseUrl = "https://localhost:4000/api/"
export default {
course(url = baseUrl + 'courses/') {
return {
fetchAll: () => axios.get(url),
fetchById: id => axios.get(url + id),
create: newRecord => axios.post(url, newRecord),
update: (id, updateRecord) => axios.put(url + id, updateRecord),
delete: id => axios.delete(url + id)
}
}
}
Действие курса. js - как:
import courseApi from "../_services/courseApi";
import { ACTION_TYPES } from '../_constants';
const formateData = data => ({
...data,
})
export const fetchAll = () => dispatch => {
courseApi.course().fetchAll()
.then(response => {
dispatch({
type: ACTION_TYPES.FETCH_ALL,
payload: response.data
})
})
.catch(err => console.log(err))
}
export const create = (data, onSuccess) => dispatch => {
data = formateData(data)
courseApi.course().create(data)
.then(res => {
dispatch({
type: ACTION_TYPES.CREATE,
payload: res.data
})
onSuccess()
})
.catch(err => console.log(err))
}
export const update = (id, data, onSuccess) => dispatch => {
data = formateData(data)
courseApi.course().update(id, data)
.then(res => {
dispatch({
type: ACTION_TYPES.UPDATE,
payload: { id, ...data }
})
onSuccess()
})
.catch(err => console.log(err))
}
export const Delete = (id, onSuccess) => dispatch => {
courseApi.course().delete(id)
.then(res => {
dispatch({
type: ACTION_TYPES.DELETE,
payload: id
})
onSuccess()
})
.catch(err => console.log(err))
}
courseReducer. js выглядит следующим образом:
import { ACTION_TYPES } from '../_constants';
const initialState = {
list: []
}
export const course = (state = initialState, action) => {
switch (action.type) {
case ACTION_TYPES.FETCH_ALL:
return {
...state,
list: [...action.payload]
}
case ACTION_TYPES.CREATE:
return {
...state,
list: [...state.list, action.payload]
}
case ACTION_TYPES.UPDATE:
return {
...state,
list: state.list.map(x => x.id == action.payload.id ? action.payload : x)
}
case ACTION_TYPES.DELETE:
return {
...state,
list: state.list.filter(x => x.id != action.payload)
}
default:
return state
}
}
хранилище. js выглядит следующим образом:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
const loggerMiddleware = createLogger();
export const store = createStore(
rootReducer,
applyMiddleware(
thunkMiddleware,
loggerMiddleware
//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
структура папок выглядит следующим образом: 1.courseActions. js находится в папке _actions 2. coursApi. js находится в папке _services 3.courseReducer. js в папке _reducers 4.store. js находится в папке _helper 5. ACTION_TYPES находится в папке _constants. Я буду очень благодарен за добрую помощь. ошибка в том, что состояние не определено.