Problems in passing parameters to custom middleware - reactjs

Question

Hi I am passing an id to the custom middleware I created in redux. here is my Dispatch function:
/** NPM Packages */
import React, { Component } from "react";
import { connect } from "react-redux";
import fetchCategory from "../../../actions/categoryAction";
import deleteCategory from "../../../actions/categoryDeleteAction";
/** Custom Packages */
import List from "../List";
//import API from "../../utils/api";
class Category extends Component {
constructor(props) {
super(props);
this.state = { categories: [], mesg: "", mesgType: "" };
this.onChange = this.onChange.bind(this);
}
/** Hook Call */
componentDidMount = async () => {
if (this.props.location.state)
this.setState({
mesg: this.props.location.state.mesg,
mesgType: this.props.location.state.mesgType
});
this.closeMesg();
this.props.fetchCategory();
};
/** Methods */
onChange = e => this.setState({ [e.target.name]: e.target.value });
onDelete = id => {
/*await API.delete("categories/" + id)
.then(res => {
const categories = this.state.categories.filter(el => el._id !== id);
this.setState({
categories: categories,
mesg: res.data.msg,
mesgType: "success"
});
})
.catch(err => console.log(err));
this.closeMesg();*/
this.props.deleteCategory(id);
};
closeMesg = () =>
setTimeout(
function() {
this.setState({ mesg: "", mesgType: "" });
}.bind(this),
30000
);
/** Rendering the Template */
render() {
const { mesg, mesgType } = this.state;
return (
<>
{mesg ? (
<div
className={"alert alert-" + mesgType + " text-white mb-3"}
role="alert"
>
{mesg}
</div>
) : (
""
)}
<List
listData={this.props.categories}
listName="category"
_handleDelete={this.onDelete.bind(this)}
/>
</>
);
}
}
const matchStatestoProps = state => {
return { categories: state.categories };
};
const dispatchStatestoProps = dispatch => {
return {
fetchCategory: () => dispatch(fetchCategory),
deleteCategory: (id) =>dispatch(deleteCategory(id))
};
};
export default connect(matchStatestoProps,dispatchStatestoProps)(Category);
Here is action:
import API from "../pages/utils/api";
const deleteCategory = (id,dispatch) =>{
API.delete("categories/" + id)
.then(() => {
dispatch({type:'DELETE'})
})
.catch(err => console.log(err));
}
export default deleteCategory;
here is my reducer:
const initState = [];
const categoryReducer = (state = initState, { type, payload }) => {
switch (type) {
case "FETCH_CATEGORY":
return payload.data;
case "DELETE":
alert("Data Deleted");
default:
return state;
}
};
export default categoryReducer;
Now i am getting this error :
Error: Actions must be plain objects. Use custom middleware for async actions.
▶ 6 stack frames were collapsed.
deleteCategory
src/app/pages/isolated/category/Categories.js:92
89 | const dispatchStatestoProps = dispatch => {
90 | return {
91 | fetchCategory: () => dispatch(fetchCategory),
> 92 | deleteCategory: (id) =>dispatch(deleteCategory(id))
93 | };
94 | };
95 |
If possible could someone say where am I going wrong?
Or is there any other way to pass parameters to the custom middleware?

Answer 1

Use redux-thunk as a middleware to handle async operations in Actions. Actions must be return plain objects, which means, something like below,
{
type : "DELETE",
payload : data
}
But in the Delete action you return a Promise, so that's why it is saying Actions must be return only plain objects. To handle this situation you can use a middleware like reduxt-thunk.
https://www.npmjs.com/package/redux-thunk
Edit -
If you use the Redux-thunk, In the catch bloack of the deleteCategory, you didn't return any object. You just console.log() the error. return the err from catch block and see if you see any errors with your API call

Answer 2

You can refer my react project
class Category extends Component {
constructor(props) {
super(props);
this.state = { categories: [], mesg: "", mesgType: "" };
this.onChange = this.onChange.bind(this);
}
/** Hook Call */
componentDidMount = async () => {
if (this.props.location.state)
this.setState({
mesg: this.props.location.state.mesg,
mesgType: this.props.location.state.mesgType
});
this.closeMesg();
this.props.dispatch(fetchCategory()); // we have to dispatch our action like
};
/** Methods */
onChange = e => this.setState({ [e.target.name]: e.target.value });
onDelete = id => {
this.props.dispatch(deleteCategory(id));
};
closeMesg = () =>
setTimeout(
function() {
this.setState({ mesg: "", mesgType: "" });
}.bind(this),
30000
);
/** Rendering the Template */
render() {
const { mesg, mesgType } = this.state;
return (
<>
{mesg ? (
<div
className={"alert alert-" + mesgType + " text-white mb-3"}
role="alert"
>
{mesg}
</div>
) : (
""
)}
<List
listData={this.props.categories}
listName="category"
_handleDelete={this.onDelete.bind(this)}
/>
</>
);
}
}
const matchStatestoProps = state => {
return { categories: state.categories };
};
export default connect(matchStatestoProps)(Category);
In your deleteCategory : you can access dispatch like
const deleteCategory = (id) => async (dispatch) =>{
await API.delete("categories/" + id)
.then(() => {
dispatch({type:'DELETE'})
})
.catch(err => console.log(err));
}
export default deleteCategory;