Implementing notifications

Whenever something happens in the application, such as a successful form submission or a failed API request, we want to notify our users about it.

We will need to create a global store that will keep track of all notifications. We want it to be global because we want to show these notifications from anywhere in the application.

For handling global states, we will be using Zustand, a state management library that is lightweight and very simple to use.

Creating the store

Let’s open the src/stores/notifications/notifications.ts file and import the dependencies we will use:

import { createStore, useStore } from 'zustand';
import { uid } from '@/utils/uid';

Then, let’s declare the notification types for the store:

export type NotificationType =
  | 'info'
  | 'warning'
  | 'success'
  | 'error';
export type Notification = {
 ...