Deleting Data¶
The final step is to implement the delete functionality, which as in the Ember solution, we will implement as an event handler in the routes/modules/index.jsx
. Updated that file, to add the
import { readEndpoint, deleteResource } from 'redux-json-api';
...
function deleteModule(ev, module) {
ev.preventDefault();
props.dispatch(deleteResource(module));
}
...
<li>
<a
role="menuitem"
aria-label="Leave"
title="Leave"
className="mdi mdi-delete warning"
tabIndex="0"
onClick={(ev) => deleteModule(ev, module)}
></a>
</li>
The functionality is very simple, we use the deleteResource
action to tell the Redux JSONAPI reducer to delete the resource. In the onClick
handler, we can use the same inline functionality like we did in the Edit
component and simply call deleteModule(ev, module)
. Since we are using functional components and hooks, React knows exactly which module we want to delete and we do not have to manually bind a this
context like we would have to if we were using class components. Here, we want to pass the module
to delete as a parameter and the event that we can use to prevent the default behaviour as another parameter. Thus, when the event is then called we have access to both the module
and ev
parameters in the event handler.
With that we have now implemented the full create-read-update-delete (CRUD) workflow.