Quiero mantener un historial de los cambios realizados en una entidad. Por ejemplo, entidad de usuario:
{ name: 'Raz', places_visited: [ { city: 'Jerusalem', street: 'King David', house_number: 10 } ] }Entonces se pueden aplicar estos tipos de cambios:
{ city: 'Tel Aviv', street: 'Ibn Gabirol', house_number: 30 }Quiero almacenar esos cambios de alguna manera, probablemente en la base de datos en una colección de historial dedicada que almacenará cualquier cambio, independientemente de la entidad del usuario. La colección de historial puede verse así y tener estos campos:
EntityType, EntityId, KeyChanged, OldValue, NewValue, ... (IAT y By, etc.)
Entonces, en nuestro caso, la colección de historial debe contener las siguientes 4 filas:
{ city: 'Jerusalem', street: 'King David', house_number: 20 } , { city: 'Tel Aviv', street: 'Ibn Gabiron', house_number: 30 } , hoy, por administración,{ city: 'Jerusalem', street: 'King David', house_number: 20 } , hoy, por administradorHe intentado usar la nueva clase Proxy JS incorporada:
const handler = { get(target, prop) { if (typeof target[prop] === "object" && target[prop] !== null) { handler.prefix += `${prop}.` return new Proxy(target[prop], handler) } return target[prop] }, set(target, prop, newValue) { const oldValue = target[prop] target[prop] = newValue if (oldValue !== newValue) { console.log(oldValue, newValue) } return true } } const proxy = new Proxy(user, handler) Sin embargo, cuando se utilizan métodos como push , unshift o similares, se complican y el seguimiento se arruina. Además, el estilo "condenado" no se aplica, como "places_visited.0", solo el valor primitivo en su lugar.
¿Cómo se puede lograr esto?
Básico :
Para aplicaciones más simples, puede establecer puntos de observación en la pestaña Fuentes (parte superior del panel izquierdo) en la ventana DevTools en Chrome (accesible a través de Inspeccionar en el menú del botón derecho), aunque esto tiene la desventaja de tener que mirar los objetos manualmente dentro cierres Eso puede ser lo suficientemente bueno como una verificación rápida para su caso de uso si sabe cuándo y cómo cambia el objeto en el código.
Intermedio:
Si desea realizar un seguimiento más longitudinal de los cambios de objetos (incluidas las mutaciones), un compañero de equipo me presentó recientemente la extensión Redux DevTools para Chrome, FireFox y las subsiguientes bifurcaciones de estos dos navegadores. Como extensión, es una versión más liviana del paquete NPM del mismo nombre que no requiere instalación en su ensamblaje de hilo, etc.
Tenga en cuenta que fue diseñado y es más útil para Redux, pero según la documentación , también es posible usarlo con otros marcos.
Avanzado:
Las capacidades más avanzadas proporcionadas por una instalación completa del paquete redux-devtools brindan acceso a monitores personalizables que se pueden ajustar a una variedad de componentes, lo que le permite orquestar el registro de nivel de depuración dentro de la operación normal de tiempo de ejecución de la aplicación.