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:

  1. type que es un string que dice qué tipo es.
  2. 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:

  1. Subscripciones a cambios de estados.
  2. 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:

  1. El componente dispara una acción.
  2. El Store toma esa acción y llama al reducer correspondiente con el action como parámetro.
  3. El reducer devuelve el nuevo state.
  4. El Store toma el nuevo state.
  5. Notifica a los subscriptores y el componente renderiza la nueva información.
Component
APPLICACIÓNCOMPONENTESSTORE
Crea un nuevo State,
El store lo almacena como el nuevo
Reducer
Es enviado al
Action
State
Notifica a los subscriptores
y renderiza los nuevos valores
Dispatch