I have try many times to solve that error but don’t know every time why that error comes or in network tab delete api called but it’s undefined, so please help me to solve it!
Also I see all the other sites to solve this but it’s never solve.
[Screenshots here][1]
[1]: https://i.stack.imgur.com/8scr3.jpg
[2]: https://i.stack.imgur.com/V9lhH.jpg
tablelistReducer.js
import * as actionTypes from '../actions/actionTypes'
const initialState = {
loading: false,
posts: [],
error: false,
}
const listReducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.FETCH_REQUEST:
return {
...state,
loading: true,
error: false,
posts: []
}
case actionTypes.FETCH_REQUEST_SUCCESS:
return {
...state,
loading: false,
posts: action.payload,
error: false
}
case actionTypes.FETCH_REQUEST_FAIL:
return {
...state,
loading: false,
posts: [],
error: action.payload
}
case actionTypes.DELETE_POST:
// const deletedPost = state.posts.filter(post => post !== action.payload)
return {
...state,
posts: state.posts.filter(post => post !== action.payload)
}
default:
return state
}
}
export default listReducer
listActions.js
import * as actionTypes from "./actionTypes";
import userService from "../services/userService";
const fetchRequest = () => {
return {
type: actionTypes.FETCH_REQUEST
}
}
const fetchRequestSuccess = (posts) => {
return {
type: actionTypes.FETCH_REQUEST_SUCCESS,
payload: posts
}
}
const fetchRequestFail = (error) => {
return {
type: actionTypes.FETCH_REQUEST_FAIL,
payload: error
};
};
export function fetchUserList() {
return (dispatch) => {
dispatch(fetchRequest())
return userService
.getUsers()
.then((res) => {
dispatch(fetchRequestSuccess(res))
console.log(res)
return res
})
.catch((err) => {
dispatch(fetchRequestFail(err))
console.log(err)
})
}
}
export const deletePost = id => dispatch => {
return userService.deleteUsers(id)
// .then(res => res.json())
.then(id=> {
dispatch({
type: actionTypes.DELETE_POST,
payload: id
})
// return response
})
.catch(error => {
console.log(error);
})
}
userService.js
import api from "./apis/api";
import {hydrateUsers} from './transformers/userTransformer';
class UserService {
getUsers() {
return api.user.getUsers().then(hydrateUsers);
};
postUsers(){
return api.user.postUsers().then(hydrateUsers);
};
deleteUsers(){
return api.user.deleteUsers().then(hydrateUsers);
}
}
export default new UserService();
userApi.js
import api from "./api";
export default class UserAPI {
getUsers() {
return api.get("/users");
};
postUsers(data){
return api.post("/users", data );
};
deleteUsers(id){
return api.delete(`/users/${id}`);
}
}
api.js
import axios from "axios";
import UserAPI from "./userApi";
import storage from "../storage";
import _ from "lodash";
const BASEURL = "https://jsonplaceholder.typicode.com";
class API {
__user = new UserAPI();
api = axios.create({
baseURL: BASEURL,
transformRequest: [(data) => JSON.stringify(data)],
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
get user() {
return this.__user;
}
get(url, ...args) {
return this.sendRequestInternal(this.api.get, url, ...args);
}
post(url, ...args) {
return this.sendRequestInternal(this.api.post, url, ...args);
}
patch(url, ...args) {
return this.sendRequestInternal(this.api.patch, url, ...args);
}
delete(url, ...args){
return this.sendRequestInternal(this.api.delete, url, ...args);
}
sendRequestInternal(requestFunc, url, ...args) {
const token = storage.get("token");
if (token) {
this.api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}
return requestFunc(url, ...args)
.then((response) => response.data && response.data)
.catch((error) => {
if (error.response) {
if (_.get(error, ["response", "data", "status"], 500) === 401) {
storage.clearAll();
window.location = "/";
}
}
throw error;
});
}
}
export default new API();
TableList.js(main component)
import React from 'react';
import { connect } from 'react-redux';
import { Table } from 'react-bootstrap';
import { fetchUserList, deletePost} from '../actions/listActions';
import { get } from 'lodash';
class TableList extends React.Component {
componentDidMount() {
this.props.loadTableList();
}
render() {
const { tableList } = this.props;
return (
<>
<div style={{ margin: 110 }}>
<Table striped bordered hover>
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{tableList.map(user => {
return <tr key={user.id}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>
<button onClick={()=>this.props.deletePosts(user.id)}>Delete</button>
</td>
</tr>
} )}
</tbody>
</Table>
</div>
</>
)}}
const mapStateToProps = (state) => {
return {
tableList: get(state, ['listReducer', 'posts'], [])
}
}
const mapDispatchToProps = (dispatch) => {
return {
loadTableList: () => dispatch(fetchUserList()),
deletePosts : (id)=>dispatch(deletePost(id)),
//addNewpost : ()=>dispatch(addPost())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TableList)
