Как управлять уведомлением с одним состоянием

Это проект React с демо-версией системы уведомлений Mantine. Он имеет множество функциональных компонентов, использующих уведомление.

const A = () => {
  useEffect(() => {
    notifications.show({
        // config
    });
  }, []);

  return <></>;
};
const B = () => {
  useEffect(() => {
    notifications.show({
        // config
    });
  }, []);

  return <></>;
};
const C = () => {
  useEffect(() => {
    notifications.show({
        // config
    });
  }, []);

  return <></>;
};

Теперь у нас есть глобальное состояние с именем muteMode. Если пользователь включит это состояние, все уведомления отключатся. Поэтому мне нужно изменить код, как показано ниже.

const A = () => {
  const { muteMode } = useGlobalState(state => state);
  
  useEffect(() => {
    if (muteMode) {
      notifications.show({
        // config
      });
    }
  }, [muteMode]);

  return <></>;
};
// The B、C function components are same as A

Я думаю, это не очень хороший код. Потому что я изменил все, что касается уведомлений. Если я добавлю дополнительную информацию об уведомлениях, мне придется внести изменения еще раз. Существует ли что-то вроде диспетчера уведомлений?

Что вы можете сделать, так это обернуть notifiction.show() в собственную функцию. Теперь эта функция обрабатывает вещи на основе значения muteMode. По сути, вы создаете уровень абстракции (вы можете назвать его менеджером). Но это похоже на вопрос, основанный на мнениях, поскольку вы ищете разные подходы к «хорошему коду».

— 15.06.2024 10:14

reactjs typescript mantine

15.06.2024 10:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать собственный хук, чтобы не приходилось переписывать везде. Пример -

const useNotification = (config) => {
  const { muteMode } = useGlobalState(state => state);
  
  useEffect(() => {
    if (muteMode) {
      notifications.show(config);
    }
  }, [muteMode, config]);

  return null;
};

В вашем компоненте используйте его так:

const A = () => {
  useNotification({ title: 'Notification A' })

  return <></>;
};

const B = () => {
  useNotification({ title: 'Notification B' })

  return <></>;
};

const C = () => {
  useNotification({ title: 'Notification C' })

  return <></>;
};

Надеюсь это поможет!

15.06.2024 12:49