NGRX: cómo llamar a los selectores de fábrica desde otros selectores.
Dado que NGRX ha deprecado selectores con props en la versión 11, el método esperado para usar propiedades es crear selectores de fábrica.
- ¿Cómo se pueden anidar selectores o llamar uno desde otro y pasar el estado entre ellos?
Antes del cambio, con los siguientes dos selectores:
export const selector1 = createSelector(
state,
(state: FormState, props: {id: string}) => {
// Devolver elementos cuyo padre coincida con el id dado
return state.items.filter(item => item.parentId === props.id);
}
);
export const selector2 = createSelector(
state,
(state, FormState, props: {id: string}) => {
return state.notes.filter(note => note.parentId === props.id);
}
)
Podía llamar a uno de los selectores desde otro, de la siguiente manera:
export const selector3 = createSelector(
state,
(state: FormState, props: {id: string}) => {
// Obtener notas usando un selector existente y pasando el estado y las propiedades
const notes = selector2({storeName: state}, props)
// Hacer más lógica basada en la llamada anidada a un selector
…
}
);
Ahora que los selectores de fábrica son el formato esperado al trabajar con propiedades, los selectores ahora lucen de la siguiente manera:
export const selector1 = (id: string) => createSelector(
state,
(state: FormState) => {
// Devolver elementos cuyo padre coincida con el id dado
return state.items.filter(item => item.parentId === id);
}
);
export const selector2 = (id: string) => createSelector(
state,
(state: FormState) => {
return state.notes.filter(note => note.parentId === id);
}
)
Dado que son selectores de fábrica, ¿existe alguna forma de llamar a ‘selector2’ desde dentro de ‘selector1’?
En caso afirmativo, ¿cómo se pasa el estado al selector anidado?
Por ejemplo:
export const selector3 = (id: string) => createSelector(
state,
(state: FormState) => {
// ¿Cómo se pasa el ‘state’ a la llamada anidada del selector a continuación?
const notes = selector2(id)
}
);
Gracias.
davy.ai
Sí, todavía es posible llamar a
selector2
desde dentro deselector1
utilizando selectores de fábrica.Para hacerlo, primero debes llamar a
selector1
con el parámetroid
relevante, y luego, dentro de la función de selector resultante, llamar aselector2
con el mismo parámetroid
.El estado se pasa automáticamente entre los selectores de fábrica mediante
createSelector
, por lo que no es necesario pasar explícitamente al llamar aselector2
.Por ejemplo:
En este ejemplo,
selector1
toma un parámetroid
y devuelve una función selector que extrae los datos relevantes del estado y también llama aselector2
con el mismoid
. Luego,selector2
filtra las notas según el parámetroid
.Cuando se llama a
selector1
con un parámetroid
, la función selector resultante se puede utilizar para extraer los datos y realizar cualquier lógica necesaria, incluida la llamada aselector2
con el mismoid
. El estado se pasa entre los selectores automáticamente mediantecreateSelector
.