Diferencia entre las API createSelector y createDraftSafeSelector en Redux Toolkit.

02 Jun, 2023 Programación 0

createSelector mencionado en https://github.com/reduxjs/reselect

La API createSelector, que genera funciones selectoras memorizadas.
createSelector acepta uno o más selectores “de entrada”, que extraen valores
de los argumentos, y un selector “de salida” que recibe los
valores extraídos y debería devolver un valor derivado. Si el selector generado
es llamado varias veces, el resultado solo se re-calculará
cuando los valores extraídos hayan cambiado.

createDraftSafeSelector mencionado en https://redux-toolkit.js.org/api/createSelector

createDraftSafeSelector permite crear selectores que podem
ser utilizados con seguridad dentro de los reductores de createReducer y createSlice
con una lógica mutable con capacidad de Immer. Cuando se utiliza con valores de estado simples,
el selector seguirá memorizando normalmente según las entradas. Pero cuando
se usa con valores de Immer, el selector errará en el lado de
recalcular los resultados, solo para estar seguro.

Soy nuevo en los patrones de diseño de react y redux, así que no pude entender la diferencia y el propósito de createDraftSafeSelector.

¿Cuál es la diferencia entre ambas API? ¿Qué ejemplo podemos utilizar para entender la diferencia?

davy.ai

June 2, 2023 at 4:02 pm

createSelector y createDraftSafeSelector son dos APIs proporcionadas por el ecosistema Redux para ayudar a los desarrolladores a seleccionar datos de forma eficiente del almacenamiento Redux. La principal diferencia entre ambos es cómo manejan los datos inmutables y mutables.

createSelector genera selectores memorizados que extraen datos del almacenamiento Redux de forma eficiente para su uso en componentes. Cuando se llama al selector, compara los valores “extraídos” de los selectores de entrada con sus valores anteriores, y si los valores no han cambiado, el selector devuelve un valor en caché. Esto optimiza el rendimiento evitando re-renderizaciones innecesarias de componentes conectados.

Por otro lado, createDraftSafeSelector es una variación de createSelector que se puede utilizar de forma segura en conjunto con estado de borrador impulsado por Immer. Immer es una biblioteca que simplifica la inmutabilidad permitiendo a los desarrolladores utilizar código mutable para manipular el estado mientras maneja automáticamente las restricciones de inmutabilidad necesarias.

Cuando se utiliza createDraftSafeSelector con valores de estado simples, se comporta exactamente igual que createSelector y devuelve un valor memorizado si los valores de entrada no han cambiado. Sin embargo, cuando se utiliza con valores de estado de borrador gestionados por Immer, createDraftSafeSelector prioriza la precisión de los resultados sobre el rendimiento y recalcula la salida del selector cada vez que cambia el estado. Esto ayuda a evitar errores sutiles causados por valores memorizados obsoletos que pueden ocurrir al utilizar createSelector con datos mutables.

Por ejemplo, consideremos un caso en el que estamos utilizando Immer para gestionar el estado de borrador en un reductor de Redux. Tenemos un selector que depende de algunas propiedades del estado de borrador, pero también necesitamos utilizar algunos cálculos que requieren mutar el estado. En este caso, podemos utilizar createDraftSafeSelector para evitar memorizar valores que pueden cambiar después de una mutación.

import { createDraftSafeSelector } from '@reduxjs/toolkit';

const selectDraftState = (state) => state.draft;

export const calculateValue = createDraftSafeSelector(
  selectDraftState,
  (draft) => {
    draft.someProp += 1; // mutando el estado borrador
    return draft.someProp * 10; // calculando un valor derivado
  }
);

En el código anterior, estamos utilizando un objeto de borrador para calcular un valor derivado basado en una propiedad del estado borrador. Debido a que estamos mutando el estado dentro del selector, no podemos utilizar createSelector, ya que cachearía el resultado del cálculo basado en el valor antiguo del borrador después de una mutación. Sin embargo, createDraftSafeSelector siempre volverá a calcular el resultado después de una mutación para asegurarse de que esté actualizado.

Answer

davy.ai

June 2, 2023 at 4:02 pm
createSelector y createDraftSafeSelector son dos APIs proporcionadas por el ecosistema Redux para ayudar a los desarrolladores a seleccionar datos de forma eficiente del almacenamiento Redux. La principal diferencia entre ambos es cómo manejan los datos inmutables y mutables.

createSelector genera selectores memorizados que extraen datos del almacenamiento Redux de forma eficiente para su uso en componentes. Cuando se llama al selector, compara los valores “extraídos” de los selectores de entrada con sus valores anteriores, y si los valores no han cambiado, el selector devuelve un valor en caché. Esto optimiza el rendimiento evitando re-renderizaciones innecesarias de componentes conectados.

Por otro lado, createDraftSafeSelector es una variación de createSelector que se puede utilizar de forma segura en conjunto con estado de borrador impulsado por Immer. Immer es una biblioteca que simplifica la inmutabilidad permitiendo a los desarrolladores utilizar código mutable para manipular el estado mientras maneja automáticamente las restricciones de inmutabilidad necesarias.

Cuando se utiliza createDraftSafeSelector con valores de estado simples, se comporta exactamente igual que createSelector y devuelve un valor memorizado si los valores de entrada no han cambiado. Sin embargo, cuando se utiliza con valores de estado de borrador gestionados por Immer, createDraftSafeSelector prioriza la precisión de los resultados sobre el rendimiento y recalcula la salida del selector cada vez que cambia el estado. Esto ayuda a evitar errores sutiles causados por valores memorizados obsoletos que pueden ocurrir al utilizar createSelector con datos mutables.

Por ejemplo, consideremos un caso en el que estamos utilizando Immer para gestionar el estado de borrador en un reductor de Redux. Tenemos un selector que depende de algunas propiedades del estado de borrador, pero también necesitamos utilizar algunos cálculos que requieren mutar el estado. En este caso, podemos utilizar createDraftSafeSelector para evitar memorizar valores que pueden cambiar después de una mutación.
```
import { createDraftSafeSelector } from '@reduxjs/toolkit';

const selectDraftState = (state) => state.draft;

export const calculateValue = createDraftSafeSelector(
  selectDraftState,
  (draft) => {
    draft.someProp += 1; // mutando el estado borrador
    return draft.someProp * 10; // calculando un valor derivado
  }
);
```
En el código anterior, estamos utilizando un objeto de borrador para calcular un valor derivado basado en una propiedad del estado borrador. Debido a que estamos mutando el estado dentro del selector, no podemos utilizar createSelector, ya que cachearía el resultado del cálculo basado en el valor antiguo del borrador después de una mutación. Sin embargo, createDraftSafeSelector siempre volverá a calcular el resultado después de una mutación para asegurarse de que esté actualizado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Diferencia entre las API createSelector y createDraftSafeSelector en Redux Toolkit.

Answer

davy.ai