Middleware thunk

Supponiamo di voler introdurre alcuni vincoli nella gestione della lista di attività della nostra applicazione. Ad esempio, vogliamo impedire che la lista delle attività da eseguire vada oltre una certa soglia, diciamo oltre dieci attività. Supponiamo inoltre che la soglia massima di attività da eseguire sia memorizzata nello stato dell'applicazione.

Potremmo pensare di gestire la cosa all'interno del reducer, dal momento che questa funzione ha accessso allo stato, ma questo snaturerebbe lo scopo del reducer: limitarsi ad effettuare le transizioni di stato. Un modo per gestire la cosa potrebbe essere quello di definire un middleware specifico che si occupi di intercettare l'azione di aggiunta di una nuova attività per fare il controllo opportuno. La cosa è sensata, ma cosa accadrebbe se ci servisse aggiungere ancora un ulteriore vincolo? Creiamo un nuovo middleware o ne complichiamo uno di quelli esistenti?

Possiamo sia limitare il numero di middleware sia evitare di creare middleware complessi facendo ricorso al middleware redux-thunk. Questo è un middleware generico, implementata da un'apposita libreria esterna a Redux, il cui compito consiste nel verificare se un'azione è una funzione e nel qual caso eseguirla. Esso ci consente quindi di creare azioni non più come semplici oggetti, ma come funzioni, che hanno quindi una logica d'esecuzione.

Vediamo in concreto come utilizzare redux-thunk per risolvere il problema appena illustrato.

Per aggiungere la libreria al nostro progetto utilizziamo il seguente comando:

npm install --save redux-thunk

A questo punto possiamo importare la funzione thunkMiddleware ed aggiungerla all'elenco dei middleware della nostra applicazione:

import { thunkMiddleware } from 'redux-thunk'
import { createStore, applyMiddleware } from 'redux'
const initialState = { todoList: []};
let store = createStore(todo, initialState, applyMiddleware(thunkMiddleware , logger));

Fatte queste inizializzazioni, abbiamo a disposizione la possibilità di rappresentare le azioni non più soltanto come semplici oggetti, ma come funzioni. Il middleware thunkMiddleware analizzerà ciascuna azione inviata allo store e, se essa è una funzione, la eseguirà passandole due parametri: le funzioni dispatch() e getState(). Quindi, la nostra azione-funzione avrà l'opportunità di effettuare il dispatching di altre azioni e di accedere allo stato corrente.

Ciò vuol dire che possiamo ridefinire l'action creator per l'aggiunta di un'attività nel seguente modo:

function addAction(text) {
    function (dispatch, getState) {
        var state = getState();
        var action = {};
        if (state.todoList.length < state.maxTasks) {
            action = {
                type: ADD,
                payload: {task: text}
            };
        }
        return action;
    }
}

Confrontiamo questa versione dell'action creator addAction() con l'originale:

function addAction(text) {
    return {
        type: ADD,
        payload: {task: text}
    };
}

Notiamo come ora l'action creator restituisca una funzione che a sua volta restituisce l'azione. Il nome thunk si riferisce proprio ad una funzione come questo tipo di action creator. L'esecuzione dell'action creator restituirà la funzione che verrà poi eseguita dal thunkMiddleware. L'azione vera e propria viene restituita in seguito alla valutazione della condizione secondo cui il numero di elementi presenti nella lista di attività deve essere inferiore al valore specificato dalla proprietà maxTasks dello stato. Se rientriamo in questa condizione allora viene restituita l'azione come nella versione precedente di addAction(). In caso contrario, verrà restituita un'azione vuota che, per come abbiamo strutturato il nostro reducer, non genererà alcuna transizione di stato.

Naturalmente, invece di restituire un'azione vuota, quando abbiamo raggiunto la soglia massima avremmo potuto restituire una specifica azione. In questo modo, adeguando il reducer in modo da gestire tale situazione, avremmo potuto dare un feedback all'utente, cosa certamente da fare in un'applicazione reale.

Per il resto, la nostra nuova versione di action creator continuerà ad essere utilizzata come prima:

store.dispatch(addAction(task));