Immutable state not refreshing - redux

Question

I am making a react app, I have a "categories" collection and a presentation layer with a button to remove a category. My redux state refresh if I reload the page otherwise is persistent. I don't understand why it is not working since seems immutable to me, plus I am using the same pattern in another component and works fine. What am I missing ?
Here the reducer:
import {DELETE_CATEGORY} from './../../actionType';
const initialState = {
singleCategory: {},
categories: []
}
export default function(state = initialState, action){
switch(action.type){
case DELETE_CATEGORY:
return {
...state,
categories: state.categories.filter (category=>category._id !== category.payload)
}
default:
return state;
}
}
By the way if I refresh the page the store is filtered correctly.
Here is my action:
// Delete Category by id
export const deleteCategory = (categoryId) => dispatch => {
console.log('disp');
axios
.delete(`/api/categories/${categoryId}`)
.then( success => {
dispatch(successMessage);
return dispatch({
type: DELETE_CATEGORY,
payload: categoryId
})
})
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
}),
);
};
Here is my component:
class ShowCategoriesPage extends Component {
componentDidMount(){
this.props.getCategories()
}
handleDeleteCategory = (categoryId) => {
this.props.deleteCategory(categoryId);
}
render() {
const { categories } = this.props.categories;
return (
<SidebarLayout>
{categories.map(category => (
<CategoryCard
name={category.name}
type={category.type}
id={category._id}
handleDeleteCategory={this.handleDeleteCategory}
/>
))}
<Button variant="contained" color="primary" style={{marginTop: '36px'}} >
ADD NEW CATEGORY
</Button>
</SidebarLayout>
)
}
}
and this is the component:
const SimpleCard = ({ classes, name, type, id, deleteCategory })=>{
const onDeleteCategory = (categoryId) => {
deleteCategory(categoryId);
}
return (
<Card className={classes.card}>
<CardContent>
<Typography variant="h5" component="h2">
{name}
</Typography>
<Typography className={classes.pos} color="textSecondary">
{type}
</Typography>
<Button variant="small" color="primary" style={{marginTop: '36px'}} onClick={()=>onDeleteCategory(id)}>
REMOVE
</Button>
<Button variant="small" color="primary" style={{marginTop: '36px'}} >
EDIT
</Button>
</CardContent>
</Card>
);
}
I read the official redux documentation and it advise to use splice or filter like I did, can you understand why redux state is not refreshing clicking on delete button?
I want to avoid to force refresh the state.

Answer 1

are you sure this line is correct
categories: state.categories.filter (category=>category._id !== category.payload)
and not
categories: state.categories.filter (category=>category._id !== action.payload)