Escrito el 23/07/2024
NGRX Store - Effects: Conceptos de Redux
Los principales conceptos de Redux son:
Single state tree
Es un objeto plano de javascript. Compuesto por reducers. Por ejemplo.
const state = {
todos: []
};
Actions
Disparan acciones a reducers. Tienen dos propiedades:
- type que es un string que dice qué tipo es.
- payload datos necesarios para el tipo de action.
Por ejemplo:
const action {
type: 'ADD_TODO',
payload: {
label: 'Eat Pizza',
complete: false
}
};
Reducers
Son funciones puras. A partir de una acción disparada, responde al tipo de acción, toma los datos del payload, compone un nuevo estado y lo devuelve. Por ejemplo:
function reducer(state, action) {
switch (action.type) {
case 'ADD_TODO': {
const todo = action.payload;
const todos = [...state.todos, todo];
return { todos };
}
}
return state;
}
Store
Es el contenedor del state. Para interactuar con el store se hace con:
- Subscripciones a cambios de estados.
- Disparando nuevas acciones al Store.
El store invoca los reducers con el state anterior y la accion. Una vez que el reducer devuelve el nuevo state, el store lo toma como uno nuevo y notifica los subscriptores.
One-way dataflow
El flujo de la información es siempre en un sólo sentido:
- El componente dispara una acción.
- El Store toma esa acción y llama al reducer correspondiente con el action como parámetro.
- El reducer devuelve el nuevo state.
- El Store toma el nuevo state.
- Notifica a los subscriptores y el componente renderiza la nueva información.