Optimizando la tienda Redux

La memorización es un nombre elegante para el caching. Un ejemplo (muy) simple de memoización sería el siguiente:

123456789const memo ={};constsum=(a, b)= > a + b;constsumMemoized=(a, b)={;{const key =`${a}${b}`;if(memo[key])return memo[key]; memo[key]=sum(a, b);return memo[key];};

javascript

Esta técnica evita el recálculo de los valores almacenando los valores en la memoria – en otras palabras, está cambiando el espacio (memoria) por el tiempo (cálculo).

Por supuesto, puedes implementar la memorización desde cero, pero un enfoque mucho más simple es usar una biblioteca. La biblioteca más popular para memorizar selectores se llama reselección.

En nuestra aplicación, así es como podemos usar la reselección para memorizar números selectos:

12345678910111213import{ createSelector }from$0027reselect$0027;// .... acciones, reductores, etcconstselectBaseState=state=={estado}; state.fibonacci;constselectBaseIds=state={estado};selectBaseState(state). ids;constselectBaseValues=state= >selectBaseState(state).values;exportconst selectNumbers =createSelector( selectBaseIds, selectBaseValues,(ids, values)=> ids.map(id=§§; values[id])||[],);

javascript

Este nuevo selector impide que se ejecute esa función de mapa una y otra vez, dándole un impulso de velocidad.

Ahora, selectNumerDetails es un poco más complejo. reselect, por defecto, no funciona correctamente en todas las instancias del componente (es decir, el propio selector se memoriza). Dado que cada vez que instanciamos el componente Details le proporcionamos un id prop diferente, nuestro selector es llamado cada vez con argumentos diferentes – lo que provocará que reselect se crea que las cosas acaban de cambiar.

Para hacer que la reselección funcione en este escenario, necesitamos cambiar un par de cosas:

1. Convierte nuestro selector SelectNumberDetails en una fábrica (llamémoslo makeSelectNumberDetails):

1234567exportconstmakeSelectNumberDetails=()=exportconstmakeSelector( selectItem,(item)=, fibonacci:fibonacci(item.number),}),);

javascript

1. Haz lo mismo con nuestro mapStateToProps, convirtámoslo en makeMapStateToProps:

12345678constmakeMapStateToProps=()=.
javascript

Estos selectores ya le darán un rendimiento muy superior. Sólo para el impulso extra final, recordemos también la función de los fibonacci, ¡esta vez desde cero! ¡Hurra!

1234567891011constmakeFibonacci=()=:0,1:1};return(n)=constmakeFibonacci=()
javascript

Bien, ¿pero cuáles son los números?

¡Me alegro de que lo preguntes!

Hagamos una prueba donde nosotros:

Recarga la página

Escriba 45 en el campo de entrada

Comienza a grabar la actuación (en Chrome)

PulseEnter

Espere a que aparezca el nuevo elemento y deje de grabar.

Resultados:

No, en serio. El código optimizado funciona 290 veces mejor , y eso es con un valor de 45. Dado lo horrible que es el rendimiento de ese algoritmo de Fibonacci, si introduces 500 en ese formulario, es probable que un ordenador típico no complete el cálculo en tu vida. Nuestra aplicación optimizada continuará registrando actualizaciones de sub-segundos en el mismo escenario.