Подскажите как можно вызывать api показа модалки MUI в интерсепторе аксиос?
Какие варианты есть?
Ты сможешь написать свою шину событий, которая реализует?
как такое называется, что бы загуглить?
Если элемент в другом компоненте?
Привет,я установил роутер-дом можно как-то удалить это,типа как шаг назад?
всем привет, пытаюсь промапить массив из json файла, он пишет is not a function это как?
yarn uninstall можно ?
<Modal
open={open}
onClose={handleClose}
>
Содержимое модалки
<Modal/>
Какие варианты есть? Хочу показать ошибки бекенда в модалке MUI глобально для всех запросов
Ты сможешь написать свою шину событий, которая реализует?
events.on(‘event’, ) и events.fire(‘event’) ?
events.on(‘event’, ) и events.fire(‘event’) ?
Кажется нет.. Что за «шина»?
Тебе надо написать функцию которая в модалке меняет содержимое.
1. В аксиос пишешь что-то вроде showModalMessage(….), где передаешь свою ошибку
2. showModalMessage устанавливает глобальную переменную и посылает событие на обновление
3. Компонент ожидает событие что изменилась глобальная переменная и обновляет свое состояние
Глобальная переменная не буквально переменная это скорее будет класс, который реализует что-то подобное https://refactoring.guru/ru/design-patterns/observer
Ну то есть основаня идея такая
Модалка следит за переменной
Ты меняешь эту переменную при ошибке в аксион
Следоветельно при ошибке модалка обновится
как такое называется, что бы загуглить?
accordion 🪗
1. В аксиос пишешь что-то вроде showModalMessage(….), где передаешь свою ошибку
2. showModalMessage устанавливает глобальную переменную и посылает событие на обновление
3. Компонент ожидает событие что изменилась глобальная переменная и обновляет свое состояние
Глобальная переменная не буквально переменная это скорее будет класс, который реализует что-то подобное https://refactoring.guru/ru/design-patterns/observer
Спасибо)
onChange={e=> setIsDisabled(Boolean(e.target.value))} так например на инпуте можно сделать, зачем за рефом следить?
Если элемент в другом компоненте? То контекст или внешний стейт можно точно
Можно контекст, но скорее всего достаточно будет прокинуть props
Модалка следит за переменной
Ты меняешь эту переменную при ошибке в аксион
Следоветельно при ошибке модалка обновится
Модалка следит за переменной
Ты меняешь эту переменную при ошибке в аксион
Следоветельно при ошибке модалка обновится
Модалка следит за переменной
Ты меняешь эту переменную при ошибке в аксион
Следоветельно при ошибке модалка обновится
А если так? Не зашквар?
Простой компонент MuiGlobalModal
Внутри хранит состояние open и modalContent
В window сетит метод показа модалки с аргументом контента модалки (рис .1)
useEffect(() => {
window.onMuiGlobalModalOpen = handleOpen;
}, []);
В аксиосе радостно вызывать (рис.2)
const errorResponseData = error.response.data as ResponseApi;
window.onMuiGlobalModalOpen(errorResponseData.errorData.message);
Ну и саму модалку глобально положить, что бы не ререндерилась (рис .3)
<MuiGlobalModal />
Простой компонент MuiGlobalModal
Внутри хранит состояние open и modalContent
В window сетит метод показа модалки с аргументом контента модалки (рис .1)
useEffect(() => {
window.onMuiGlobalModalOpen = handleOpen;
}, []);
В аксиосе радостно вызывать (рис.2)
const errorResponseData = error.response.data as ResponseApi;
window.onMuiGlobalModalOpen(errorResponseData.errorData.message);
Ну и саму модалку глобально положить, что бы не ререндерилась (рис .3)
<MuiGlobalModal />
Нет, так нельзя, нельзя устанавливать handleOpen как глобальную переменную
Сделай класс простой
class ModalMessage {
listeners = [];
setMessage(m){
this.message = m;
this.listeners.forEach(cb => cb(this.message))
}
onChange(callback){
this.listeners.push(callback)
}
removeListener(callback){
…удаление слушателя сам реализуй
получится как-то так
this.listeners= this.listeners.filter(cb => cb != callback)
}
}
window.modalState = new ModalMessage();
В модалке подписываешься на window.modalState вот так
useEffect(()=>{
const makeWork = ()=> ….
window.modalState.onChange(makeWork)
return ()=> window.modalState.removeListener(makeWork)
},[])
Ну и все, в любом месте в коде вызываешь window.modalState.setMessage(….) и модалка появится, можно завязать видимость модалки на то что сообщение не пустое, тогда вызов window.modalState.setMessage(null) скроет модалку
Простой компонент MuiGlobalModal
Внутри хранит состояние open и modalContent
В window сетит метод показа модалки с аргументом контента модалки (рис .1)
useEffect(() => {
window.onMuiGlobalModalOpen = handleOpen;
}, []);
В аксиосе радостно вызывать (рис.2)
const errorResponseData = error.response.data as ResponseApi;
window.onMuiGlobalModalOpen(errorResponseData.errorData.message);
Ну и саму модалку глобально положить, что бы не ререндерилась (рис .3)
<MuiGlobalModal />
Глобальным делать этот ModalMessage не обязательно, можно просто обычнам модулем сделать и импорировать его в модалку и в то место где у тебя запрос делается и выставляется сообщение, window засорять не нужно
Простой компонент MuiGlobalModal
Внутри хранит состояние open и modalContent
В window сетит метод показа модалки с аргументом контента модалки (рис .1)
useEffect(() => {
window.onMuiGlobalModalOpen = handleOpen;
}, []);
В аксиосе радостно вызывать (рис.2)
const errorResponseData = error.response.data as ResponseApi;
window.onMuiGlobalModalOpen(errorResponseData.errorData.message);
Ну и саму модалку глобально положить, что бы не ререндерилась (рис .3)
<MuiGlobalModal />
Прикольно. Для более сложных модалок можно через useReducer сделать и window.dispatchGlobalModal = dispatch . И в memo обернуть.
Сделай класс простой
class ModalMessage {
listeners = [];
setMessage(m){
this.message = m;
this.listeners.forEach(cb => cb(this.message))
}
onChange(callback){
this.listeners.push(callback)
}
removeListener(callback){
…удаление слушателя сам реализуй
получится как-то так
this.listeners= this.listeners.filter(cb => cb != callback)
}
}
window.modalState = new ModalMessage();
В модалке подписываешься на window.modalState вот так
useEffect(()=>{
const makeWork = ()=> ….
window.modalState.onChange(makeWork)
return ()=> window.modalState.removeListener(makeWork)
},[])
Ну и все, в любом месте в коде вызываешь window.modalState.setMessage(….) и модалка появится, можно завязать видимость модалки на то что сообщение не пустое, тогда вызов window.modalState.setMessage(null) скроет модалку
Чёт капец, у модалки роль open-close, всё, проблема была одна, где в дом её плюнуть, но я radix ставлю и плюнуть в любом можно. Проблема решена.
Чет я не совсем понял что ты имеешь ввиду
Это очень распространенный паттерн, называет Observer и listeners (subscribers)
Да, я даже на него там выше скинул ссылку, но я так и не понял что ты мне хочешь объяснить
npm uninstall
тебе туда же, куда в прошлый раз направляли — @js_noobs_ru
да
Я?
Не увидел что ник другой, сорян
yarn remove *Библа*
@risenforces, перелогинься 🌚
Эффектор
эффектор
Эффектор
recoil
Эффектор
(Напиши это и скину 15 рублей. Всё что в дужках удали. (с) @risenforces)
Боже упаси
фу, выйди
эффектор
почему(
Параша та еще