español - ngrx angular 6 tutorial
Transformación de datos en Clase vs Reductor(ngrx/redux) (0)
Usando ngrx / redux, y siguiendo la aplicación de ejemplo ngrx lo más cerca posible. Ahora estoy haciendo esto en alguna parte de la aplicación:
get totalItems (): number {
return sumBy(this._data.items, ''metadata.value'');
}
Donde _data
es la información asíncrona sin procesar de un servidor remoto, y es parte de algunos datos de un User
.
Ahora tengo algunas opciones:
1. Crea un User
clase
constructor (public _data: UserResponse) {}
Y tiene algunos métodos como:
get name (): string {
return this._data.name;
}
get address (): string {
return this._data.address;
}
Y, además, elementos como los totalItems
antes mencionados y otros accesos directos para obtener un resultado diferente al de los datos sin procesar. Lo que no me gusta es la repetición de las propiedades y dónde usar esta clase;
- ¿Utilizo la clase de
User
en elapi-service
y devuelvo los datos transformados al módulo@Effect
, que a su vez activará las acciones deSUCCESS
oFAILED
? - ¿Lo pongo en el módulo
@Effect
, justo antes de que se@Effect
la acción?- ¿Uso
extends
oimplements
en el componente angular?
- ¿Uso
Otra cosa es que aplicamos los datos transformados en la propiedad de la payload
, lo que dificultaría la depuración de los datos remotos sin procesar.
2. Otra opción sería transformar estos datos dentro del reducer
:
El reductor actual:
case ActionTypes.FETCH_USERS_SUCCESS:
return {
...state,
users: action.payload
};
Lo que podría hacer:
case ActionTypes.FETCH_USERS_SUCCESS:
return {
...state,
users: action.payload.map((user) => {
return({
...user,
totalItems: sumBy(user.items, ''metadata.value'' });
})
};
¿Es esto una práctica anti patrón o mala? Porque veo que .filter
se usa en ejemplos todo el tiempo, y no veo que sea impuro, entonces, ¿cuáles serían los argumentos a favor / en contra de hacerlo en el reductor? De esta forma podría eliminar la necesidad de una clase de User
y cargar todos los datos necesarios en un componente.
Y, evitando que los reductores se llenen de mucha lógica, quizás haga un reductor separado para esto, que "escuche" las mismas acciones.
Opción 3:
Ponlo en un selector:
export const selectUsers = createSelector(selectUsersState, (state: Userstate) => state.payload.map((a: UsersResponse) => new User(a)))
Leyendo esta respuesta por @dan_abramov: ¿Cómo poner métodos en los objetos en el estado de Redux? me implica que la segunda opción tiene más sentido para esto, como él dice:
"En Redux, realmente no tiene modelos personalizados. Su estado debe ser objetos simples (o registros inmutables). No se espera que tengan ningún método personalizado".