tengo una tienda escribible
export default writable({})Mi servidor envía constantemente actualizaciones a esta tienda y esos controladores están en un archivo js
const handlers = { newUser: async (user) => { userStore.update(user => { userStore[user.id] = user; return userStore; }); }, statusChange: ... more... }; Un objeto de usuario tiene varios objetos y matrices anidados. Mi página de usuarios tiene un bucle #each , y para cada usuario, pasa el usuario al componente <User /> . El componente de usuario luego pasa otros objetos anidados a otros componentes, etc. El problema que tengo es que cuando cambio un valor profundamente anidado, los cientos de objetos de usuario y los componentes en los que se usan vuelven a ejecutar sus declaraciones reactivas. Dado que los valores en su mayoría no han cambiado, la mayoría de ellos no se volverán a representar, pero tengo un código pesado que debe ejecutarse en el cambio, y este código se vuelve a ejecutar incluso si la instancia del componente se relaciona con un usuario que no lo ha hecho. cambió. Intenté tener tiendas anidadas, pero luego mis controladores necesitan obtener (UserStore) cada actualización individual, y así sucesivamente para las tiendas anidadas hasta que llegue a la que realmente estaba destinada a actualizarse. Otro problema con esto es: no resolvió el problema de las actualizaciones en la cadena cuando el cambio ocurre en el nivel superior, es decir, agregar una nueva key: {user} a la tienda de usuarios.
Entonces, ¿existe una forma adecuada de hacer este tipo de administración de estado, sin causar actualizaciones donde no hay cambios?
Gracias.
Lo único que se me ocurre es usar <svelte:options immutable /> y tiendas derived .
Al hacer que los componentes sean inmutables, obtiene actualizaciones más optimizadas y limitadas, y las tiendas derivadas introducen su propio seguimiento de cambios, por lo que si extrae una propiedad de un objeto, cualquier otro cambio en el objeto no activará los suscriptores de esa tienda.
Por ejemplo, suponga que el almacén de user tiene una propiedad de name , puede desacoplarlo con un componente como este:
<svelte:options immutable /> <script> import { derived } from 'svelte/store'; export let user; const name = derived(user, $user => $user.name); $: $name, console.log('Name changed.'); </script> <div> Name: {$name} </div> Del mismo modo, en lugar de aplicar {#each} directamente a cualquier propiedad anidada, puede extraerla y separarla de los demás cambios.
Ejemplo de REPL más complejo (intente eliminar immutable y/o las tiendas derivadas).