El resultado de la función realizada por createTransformer de mobx-utils no está memorizado.

26 Jul, 2023 Programación 0

Estoy tratando de implementar una función getter computada con argumento como se muestra en esta respuesta con MobX 6 y la versión correspondiente de mobx-utils.

export class CodificatorStore {
  @observable.ref items: Array<codificator> | null = null;

  @action setItems(items: Array<codificator>): void {
    this.items = items;
  }

  @computed get item(): ITransformer<number, codificator="" |="" null=""> {
    return createTransformer((index: number): Codificator | null => {
      console.log(`get item by index: ${index}`);
      return this.items ? this.items[index] : null;
    });
  }
}

Esperaba que la función creada memoizara el resultado de su ejecución cada vez que la llamara con el mismo argumento y la misma observable items (sin cambios), pero obtengo un nuevo mensaje de registro en cada llamada en el método de renderización de mi componente React:

codificatorStore.item(0);

Según la documentación y el código fuente de mobx-utils, espero que el valor memoizado se devuelva desde reactiveView en todas las llamadas consecutivas en lugar de invocar mi función de transformación. ¿Entiendo algo mal? ¿Cómo puedo lograr el resultado deseado?</number,>

davy.ai

July 26, 2023 at 3:23 am

Parece que el problema podría estar relacionado con el hecho de que MobX 6 cambió el comportamiento de cómo se invalidan y recomputan las propiedades calculadas. Específicamente, MobX 6 introdujo una nueva API makeObservable que debe utilizarse para inicializar propiedades y decoradores observables, lo que podría afectar cómo funciona la memorización con la función createTransformer y llevar a un comportamiento inesperado.

Para asegurarse de que la memorización funcione como se espera, es posible que deba utilizar la API makeObservable para inicializar las propiedades observables en su almacenamiento y asegurarse de que la propiedad calculada esté correctamente decorada con el decorador @computed. Aquí hay un ejemplo actualizado que utiliza MobX 6 y la versión 6 de mobx-utils:

import { makeObservable, observable, computed, action } from 'mobx';
import { createTransformer } from 'mobx-utils';

export class CodificatorStore {
  @observable.ref items: Array<codificator> | null = null;

  constructor() {
    makeObservable(this);
  }

  @action setItems(items: Array<codificator>): void {
    this.items = items;
  }

  @computed get item(): (index: number) => Codificator | null {
    const transformer = createTransformer((index: number): Codificator | null => {
      console.log(`obtener item por índice: ${index}`);
      return this.items ? this.items[index] : null;
    });
    return (index: number) => transformer(index);
  }
}

En este ejemplo actualizado, utilizamos el método makeObservable para inicializar la instancia del almacenamiento con MobX 6, asegurando que los decoradores @observable y @action se apliquen correctamente. También usamos el decorador @computed para decorar el getter item, asegurándonos de que se registre correctamente como una propiedad calculada.

Para crear la función de transformación memorizada, definimos una variable local transformer utilizando la función createTransformer y devolvemos una nueva función que llama a la función memorizada transformer con el argumento index dado.

Con esta implementación actualizada, el resultado de llamar a codificatorStore.item(0) debería estar memorizado y devolver el mismo valor en llamadas consecutivas, siempre que el arreglo observable items no cambie.

Answer

davy.ai

July 26, 2023 at 3:23 am
Parece que el problema podría estar relacionado con el hecho de que MobX 6 cambió el comportamiento de cómo se invalidan y recomputan las propiedades calculadas. Específicamente, MobX 6 introdujo una nueva API makeObservable que debe utilizarse para inicializar propiedades y decoradores observables, lo que podría afectar cómo funciona la memorización con la función createTransformer y llevar a un comportamiento inesperado.

Para asegurarse de que la memorización funcione como se espera, es posible que deba utilizar la API makeObservable para inicializar las propiedades observables en su almacenamiento y asegurarse de que la propiedad calculada esté correctamente decorada con el decorador @computed. Aquí hay un ejemplo actualizado que utiliza MobX 6 y la versión 6 de mobx-utils:
```
import { makeObservable, observable, computed, action } from 'mobx';
import { createTransformer } from 'mobx-utils';

export class CodificatorStore {
  @observable.ref items: Array<codificator> | null = null;

  constructor() {
    makeObservable(this);
  }

  @action setItems(items: Array<codificator>): void {
    this.items = items;
  }

  @computed get item(): (index: number) => Codificator | null {
    const transformer = createTransformer((index: number): Codificator | null => {
      console.log(`obtener item por índice: ${index}`);
      return this.items ? this.items[index] : null;
    });
    return (index: number) => transformer(index);
  }
}
```
En este ejemplo actualizado, utilizamos el método makeObservable para inicializar la instancia del almacenamiento con MobX 6, asegurando que los decoradores @observable y @action se apliquen correctamente. También usamos el decorador @computed para decorar el getter item, asegurándonos de que se registre correctamente como una propiedad calculada.

Para crear la función de transformación memorizada, definimos una variable local transformer utilizando la función createTransformer y devolvemos una nueva función que llama a la función memorizada transformer con el argumento index dado.

Con esta implementación actualizada, el resultado de llamar a codificatorStore.item(0) debería estar memorizado y devolver el mismo valor en llamadas consecutivas, siempre que el arreglo observable items no cambie.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

El resultado de la función realizada por createTransformer de mobx-utils no está memorizado.

Answer

davy.ai