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.