Skip to content

Notification with Redux-Saga and Notistack

The notification functionality is handled with Redux Saga and Notistack. To summarise, redux saga listens for "actions" that happens in the application, and then sends a new action ADD_NOTIFICATION_MESSAGE to add to a redux store. This action to add a notification to the store triggers the Notistack component to render a notification.

With reference to Feathers Redux, the action types are written in the documentation.

Example of Notification

When a user is created in the frontend, the action services.users.types.SERVICES_USERS_CREATE_FULFILLED is called upon. See client/store/feathersSaga.js

As it can be seen, a new action ADD_NOTIFICATION_MESSAGE is sent, and is automatically color coded (can be overwritten) with the notification.

With reference to the SnackbarProvider in _app.js and the Notification component in components/Layout/Notification, it can be seen that it performs action to enqueue Notifications.

Error Handling

Often times in the codebase you will see code that looks like this:

1
2
3
4
5
6
7
8
9
 try{
        await services['monitoring-system'].patch(tech._id,{
            ...modalState
        });
        closeModal();
    }
    catch(error){
        // Handled by Redux-Saga
    }

This means that notifications are handled when certain actions happen. You can certainly add more things when error occurs, but this is something to note that every call that can result in an error should be caught.

How to add a new notification?

Based on what was said with how it works:

  1. Add new listeners in the Redux Saga file on the name of the custom action