Me gustaría crear notificaciones que caduquen después de una cantidad determinada de segundos.
Creé una propiedad que está 'activa' y cuando se cambia a falso se ocultará.
Idealmente, sería bueno tener la caducidad configurada automáticamente en el segmento, es decir, ejecutar el reductor de desactivación dentro del tiempo de ejecución del reductor de notificación , pero no estoy seguro de que sea una buena práctica, y no estoy seguro de cómo lograrlo.
¿Cuál es la mejor manera de lograr esto? Estaba pensando en agregar una fecha de caducidad en cada elemento, pero dado que el campo 'activo' ya está allí, me gustaría establecer un tiempo de espera y cambiarlo a falso después de 3 segundos.
Componente de notificación:
export function Notification() { const dispatch = useDispatch(); function disableAlert(id: number) { dispatch(disable({'id' : id})); } const notification_list = useSelector(getNotification); if (notification_list && notification_list.length > 0) { return notification_list.map((notification: any, index: number) => notification.active ? <Alert onClose={() => disableAlert(index)} style={{bottom: 50 * index}} severity={notification.mode}>{notification.message}</Alert> : console.log(notification) ) } return <></> }Actualmente tengo estas rebanadas:
const disableMessage = (state: any, message_id: number) => { return state.messages.map((message:any) => message.id === message_id ? {...message, active: !message.active} : message ); } export const notificationSlice = createSlice({ name: 'notification', initialState: initialState, reducers: { notify: (state, action) => { const { message, mode, active } = action.payload; state.messages.push({id: state.messages.length , message : message, mode: mode, active: active}); }, disable: (state, action) => { const { id } = action.payload; state.messages = disableMessage(state, id); } } })Es convención que los reductores nunca contienen ningún tipo de lógica. Recomiendo seguir con esto.
Esto deja la acción o el componente Notificación. Para mí, tiene más sentido vincular la desactivación a la presentación de la notificación individual, por lo que comenzaría el tiempo de espera allí.
Idealmente, puede dividir su componente <Alert/> en la presentación y la lógica. Algo similar a:
const NotificationAlert = ({ disableAlert, id }) => { const notification = useSelector((state) => selectNotificationById(state, id)); const handleClick = useCallback(() => { disableAlert(id); }, [disableAlert, id]); useEffect(() => { setTimeout(() => disableAlert(id), 3000); }, [disableAlert]); return ( <Alert onClose={handleClick} style={{bottom: 50 * id}} severity={notification.mode}>{notification.message}</Alert> };Y
export function Notification() { const dispatch = useDispatch(); // memoize handler with useCallback const disableAlert = useCallback((id: number) => { dispatch(disable({'id' : id})); }, [dispatch]); // Filter for active notifications already in your selector const notificationIds = useSelector(getActiveNotificationIds); return notificationIds.map((id) => <NotificationAlert disableAlert={disableAlert} id={id} /> ); } Además, asegúrese de que su acción disableAlert esté active en falso en lugar de alternarla.