Seen some similiar posts, haven't found my answer. I have this code trying to delete an object from an array, with the backend set up so it works on Post Man, when I started working with Redux I encountered this issue.
action.js:
export const deletePost = (id) => async (dispatch) => {
try {
await axios.delete(`api/posts/${id}`);
dispatch({
type: DELETE_POST,
payload: { id },
});
dispatch(setAlert('Post removed', 'success'));
} catch (err) {
dispatch({
type: POST_ERROR,
payload: { msg: err.response.statusText, status: err.response.status },
});
}
};
Reducer has been combined in the root reducer file
Reducer.js:
case DELETE_POST:
return {
...state,
posts: state.posts.filter((post) => post._id !== payload), ///Removes the post from the array
loading: false,
};
component.js:
{!auth.loading && user === auth.user._id && (
<button
onClick={() => deletePost(_id)}
type='button'
className='btn btn-danger'
>
<i className='fas fa-delete-left'></i>
</button>
)}
I've tried debugging, and it seems that the deletePost() action doesn't even start running when I click the button.
I found that this code actually deletes but in the action.js file when I send the DELETE_POST type, then it executes the capture immediately. The problem is in the try{dispatch()} function, since what I want to log before is actually logged, but what I want to log after is not.
Edit: It says that the dispatch is not a function for each dispatch in the action.js file...