es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

NGRX: cómo llamar a los selectores de fábrica desde otros selectores.

22 Jul, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, todavía es posible llamar a selector2 desde dentro de selector1 utilizando selectores de fábrica.

    Para hacerlo, primero debes llamar a selector1 con el parámetro id relevante, y luego, dentro de la función de selector resultante, llamar a selector2 con el mismo parámetro id.

    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 a selector2.

    Por ejemplo:

    export const selector1 = (id: string) => createSelector(
   state,
   (state: FormState) => {
       // Llamar a selector2 desde selector1
       const notes = selector2(id)(state);
       // Realizar más lógica basada en el resultado de selector2
       ...
   }
);

export const selector2 = (id: string) => createSelector(
   state,
   (state: FormState) => {
       return state.notes.filter(note => note.parentId === id);
   }
);

    En este ejemplo, selector1 toma un parámetro id y devuelve una función selector que extrae los datos relevantes del estado y también llama a selector2 con el mismo id. Luego, selector2 filtra las notas según el parámetro id.

    Cuando se llama a selector1 con un parámetro id, la función selector resultante se puede utilizar para extraer los datos y realizar cualquier lógica necesaria, incluida la llamada a selector2 con el mismo id. El estado se pasa entre los selectores automáticamente mediante createSelector.

Comments are closed.