TIL pub sub 패턴

export const broker = {
    listeners: {}, 
    publish: (key, message) => 
    	broker.listeners[key]?.forEach(listener => listener(message)),
    subscribe: (key, listener) => {
    	if(!broker.listeners[key]) {
        	broker.listeners[key] = [listener]
            return
        }
        broker.listeners[key].push(listener)
    }
}

 

 

Toast가 axios interceptor에서 이벤트 리스너를 등록하여 구독하게 하는 기능도 구현이 가능 

 

export const errorBroker = new EventTarget();
export const SHOW_TOAST_KEY= 'SHOW_TOAST'

axios.interceptors.response.use(
    (res) => {
    }, 
    (err) => {
    	errorBrocker.dispatchEvent(new CustomEvent(SHOW_TOAST_KEY, {
        	detail: err
        }))
        return Promise.reject(err)
     }
 )
 
 
export default function Toast() {
     const [errorMessage, setErrorMessage] = useState('');
    
     const toast = useCallback((message) => {
    	setErrorMessage(message)
        setTimeout(()=> setErrorMessage('', 3000)
     }, [])
    
     useEffect(()=>{
    	errorBroker.addEventListener(SHOW_TOAST_KEY, (e)=> toast(e.detail.message))
        
        return () => errorBroker.removeEventListener(toast)
     }, [toast])
    
     return {errorMessage && <> ... </>}
}