Tengo una tienda que se ve así:

• todos los artículos
  • elemento1: {uivalue1: 1, uivalue2: 2, posición: {x, y}}
  • ...
• ElementosSeleccionadosClaves: ['elemento1', 'elemento2']

Algunos de los componentes de la interfaz de usuario que tengo solo necesitan renderizarse cuando los valores de la interfaz de usuario cambian e ignoran los datos de posición que cambian con frecuencia pero que no afectan a esos componentes de la interfaz de usuario.

El problema que tengo es que no estoy seguro de cómo crear un selector que no vuelva a calcular sus resultados cada vez que cambien los valores de posición en los elementos.

 // This is a basic selector that will always return new reference and values const getSelectedItems = (state) => getAllItems(state).subset(getSelectedItemsKeys(state)); // This is how I'd usually cache the result with `reselect` except this // would not work since `getAllItems` will be changing frequently when // position data changes inside one of the items. const getSelectedItems = createSelector( getAllItems, getSelectedItemsKeys, (allItems, selectedKeys) => allItems.subset(selectedKeys) );

La estructura para allItems está potencialmente fuera de mi control, por lo que me gustaría una solución que no implique cambiar dónde se almacenan los datos de posición. ¿Alguna idea sobre cómo resolver esto?

Intenté trabajar con re-reselect , pero parece que aún se volvería a calcular si uno de los valores de los selectores de entrada cambia, independientemente de si la clave de caché permaneció igual o no. Esto es lo que probé:

 // I thought this might work, but I might be mis-understanding how re-reselect works. // This still recalculates even though the cache keys do not change and they are in the // cache. const getSelectedItems = createCachedSelector( getAllItems, getSelectedItemsKeys, (allItems, selectedKeys) => allItems.subset(selectedKeys) )( (state) => `keys-${state.selectedItemsKeys.join(':')}` );