I am using a ASP.NET Core Web API. Here with a middleware, if the response of the incoming request is available in the cache, I send it back in the response.
I can retrieve all the data and view it on the page in requests I make without using the cache.
However, when I use the cache, I still retrieve the data, but when I try to view it, the data is undefined and I cannot be shown.
I don't understand what is causing this problem.
Request
export function getCategories() {
return async function (dispatch, getState) {
await axios.get(CATEGORIES_PATH).then((res) => {
dispatch(getCategoriesSuccess(res.data))
console.log("categories:",res.data);
return res.data;
}).catch(err => redirectErrPage(err, dispatch));
}}
React
class CategoryList extends Component {
componentDidMount() {
this.props.actions.getCategories();
}
render() {
return (
<div >
<ListGroup className="shadow-lg">
<ListGroupItem >
<h5>
{
this.props.categories.map(c => (
<Link key={c.id} to={"/feed/" + encodeURIComponent(c.name)} className="text-decoration-none"> <Badge
variant="info"
className="ml-2 mt-2 cursorPointer category "
>{c.name}</Badge></Link>
))
}
</h5>
</ListGroupItem>
</ListGroup>
</div>
)
}}
function mapStateToProps(state) {
return { categories: state.categoryListReducer, selectedCategories: state.selectedCategoriesReducer }
}
function mapDispatchToProps(dispatch) {
return {
actions: {
getCategories: bindActionCreators(categoryAsyncActions.getCategories, dispatch)
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CategoryList);
Without cache
Redux
With cache
Redux