El objetivo es crear una cola para almacenar solicitudes de API.
Resultado Esperado:
Add , la solicitud debe agregarse a la cola;Sync , todas las solicitudes de API de la cola deben activarse y borrarseEsto es lo que he probado hasta ahora: https://codesandbox.io/s/elated-sky-e23w6?file=/src/App.js
Hay algunos problemas aquí:
_store se borra cada vez que se agrega una nueva solicitud;¿Cómo se puede solucionar esto? ¡Gracias!
La cola debe almacenarse como estado de un componente React. Lo que necesita es el gancho useState o useRef . Este último es mejor en su caso porque ya ha implementado un BoxEventProcessor y no necesita volver a procesar ningún componente cuando se hace clic en un botón add / submit . (ver la diferencia aquí )
const App = () => { const sendEventToServer = async (id) => { ... }; const refBoxEventProcessor = React.useRef( createSerialProcessor(sendEventToServer) ); const submit = (id) => { refBoxEventProcessor.current.addEvent(`param-${id}`, new Date().toString()); }; const onSync = () => { refBoxEventProcessor.current.processEvents(); }; return (<>...</>); Arriba hay un ejemplo mínimo para useRef() . Su argumento es una instancia recién creada de SerialProcessor , que se almacenará en el objeto refBoxEventProcessor bajo la propiedad current . Permanecerá en la última re-renderización. Todas las "solicitudes de API" del usuario se almacenan en la cola de este objeto hasta que el usuario haga clic en el botón de sync para borrar la cola.
Puede elaborar la inicialización ( useRef ) y submit funciones para adaptarse mejor a sus necesidades.