React/Redux: Why blog app is not removing the items? - reactjs

Question

I have created a simple blog app using react and redux, right now only two functionalities are present in the app -> rendering and deleting blogs. Rendering is working fine but not the delete one.
Most likely, the issue will be in the reducer of my application. Please Suggest.
Here's my whole code.
sandbox link: https://codesandbox.io/s/testing-75tjd?file=/src/index.js
ACTION
import { DELETE_BLOGS, GET_BLOGS } from "./actionTypes";
// for rendering list of blogs
export const getBlog = () => {
return {
type: GET_BLOGS,
};
};
// for deleting the blogs
export const deleteBlogs = (id) => {
return {
type: DELETE_BLOGS,
id,
};
};
REDUCER
import { DELETE_BLOGS, GET_BLOGS } from "../actions/actionTypes";
const initialState = {
blogs: [
{ id: 1, title: "First Blog", content: "A new blog" },
{ id: 2, title: "Second Blog", content: "Just another Blog" },
],
};
const blogReducer = (state = initialState, action) => {
switch (action.types) {
case GET_BLOGS:
return {
...state, // a copy of state
};
case DELETE_BLOGS:
return {
...state,
blogs: state.filter((blog) => blog.id !== action.id),
};
default:
return state; // original state
}
};
export default blogReducer;
COMPONENT
import React, { Component } from "react";
import { connect } from "react-redux";
import { deleteBlogs } from "../actions/blogActions";
class AllBlogs extends Component {
removeBlogs = (id) => {
console.log("removeBlogs function is running with id", id);
this.props.deleteBlogs(id); // delete action
};
render() {
return (
<div>
{this.props.blogs.map((blog) => (
<div key={blog.id}>
<h3>{blog.title}</h3>
<p>{blog.content}</p>
<button onClick={() => this.removeBlogs(blog.id)}>delete</button>
<hr />
</div>
))}
</div>
);
}
}
const mapStateToProps = (state) => ({
blogs: state.blogs,
});
export default connect(mapStateToProps, { deleteBlogs })(AllBlogs);

Answer 1

ISSUE
You were sending action key type and receiving as action.types in reducer
SOLUTION
const blogReducer = (state = initialState, action) => {
switch (action.type) { // change `types` to `type`
case DELETE_BLOGS:
return {
...state,
blogs: state.blogs.filter((blog) => blog.id !== action.id)
};
default:
return state; // original state
}
};