Redux Avanzato: Async Code e Side Effects

Introduzione

I reducer in Redux devono essere funzioni pure, sincrone e senza side effects. Quando serve eseguire codice asincrono (es. richieste HTTP) o side effects, esistono due approcci: eseguirli nei componenti con useEffect o in action creators personalizzati (thunks). Questo articolo spiega come funzionano entrambi gli approcci.

Il Problema: Reducer Puri

I reducer devono essere funzioni pure che prendono input (state e action) e producono output (nuovo state) senza side effects:

1
// ❌ SBAGLIATO: side effect nel reducer
2
function cartReducer(state, action) {
3
  if (action.type === 'ADD_ITEM') {
4
    // ❌ Non fare mai questo!
5
    fetch('/api/cart', { method: 'POST', body: JSON.stringify(state) });
6
    return { ...state, items: [...state.items, action.payload] };
7
  }
8
  return state;
9
}

I reducer non possono:

• Eseguire codice asincrono
• Fare chiamate HTTP
• Accedere a localStorage
• Eseguire qualsiasi side effect

Due Approcci per Side Effects

Approccio 1: Side Effects nei Componenti

Si può eseguire codice asincrono nei componenti usando useEffect e poi dispatchare azioni quando il side effect è completato:

1
import { useEffect } from 'react';
2
import { useSelector, useDispatch } from 'react-redux';
3
import { sendCartData } from './store/cart-actions';
4

5
function App() {
6
  const cart = useSelector(state => state.cart);
7
  const dispatch = useDispatch();
8
  const isInitial = useRef(true);
9

10
  useEffect(() => {
11
    // Evita di inviare al primo render
12
    if (isInitial.current) {
13
      isInitial.current = false;
14
      return;
15
    }
16

17
    // Side effect: invio HTTP request
18
    dispatch(sendCartData(cart));
19
  }, [cart, dispatch]);
20

21
  return <Layout />;
22
}

Il componente seleziona lo state da Redux e quando cambia esegue il side effect. La logica di trasformazione dei dati rimane nel reducer.

1
// UI slice
2
const uiSlice = createSlice({
3
  name: 'ui',
4
  initialState: { notification: null },
5
  reducers: {
6
    showNotification(state, action) {
7
      state.notification = {
8
        status: action.payload.status, // 'pending', 'success', 'error'
9
        title: action.payload.title,
10
        message: action.payload.message
11
      };
12
    }
13
  }
14
});
15

16
// Nel componente
17
useEffect(() => {
18
  dispatch(uiActions.showNotification({
19
    status: 'pending',
20
    title: 'Sending...',
21
    message: 'Sending cart data'
22
  }));
23

24
  sendCartData(cart)
25
    .then(() => {
26
      dispatch(uiActions.showNotification({
27
        status: 'success',
28
        title: 'Success',
29
        message: 'Cart data sent successfully'
30
      }));
31
    })
32
    .catch(() => {
33
      dispatch(uiActions.showNotification({
34
        status: 'error',
35
        title: 'Error',
36
        message: 'Sending cart data failed'
37
      }));
38
    });
39
}, [cart, dispatch]);

Approccio 2: Action Creators (Thunks)

Un thunk è una funzione che ritorna un’altra funzione invece di un action object. Redux Toolkit supporta nativamente i thunk:

1
import { uiActions } from './ui-slice';
2

3
export function sendCartData(cart) {
4
  // Ritorna una funzione invece di un action object
5
  return async (dispatch) => {
6
    // Dispatch di azioni multiple
7
    dispatch(uiActions.showNotification({
8
      status: 'pending',
9
      title: 'Sending...',
10
      message: 'Sending cart data'
11
    }));
12

13
    try {
14
      const response = await fetch('https://firebase-url/cart.json', {
15
        method: 'PUT',
16
        body: JSON.stringify(cart)
17
      });
18

19
      if (!response.ok) {
20
        throw new Error('Sending cart data failed');
21
      }
22

23
      dispatch(uiActions.showNotification({
24
        status: 'success',
25
        title: 'Success',
26
        message: 'Cart data sent successfully'
27
      }));
28
    } catch (error) {
29
      dispatch(uiActions.showNotification({
30
        status: 'error',
31
        title: 'Error',
32
        message: 'Sending cart data failed'
33
      }));
34
    }
35
  };
36
}

Quando si dispatcha un thunk, Redux esegue la funzione ritornata passando dispatch come argomento. Questo permette di eseguire side effects prima di dispatchare azioni multiple.

1
// Nel componente
2
dispatch(sendCartData(cart));
3

4
// Redux Toolkit riconosce che sendCartData(cart) ritorna una funzione
5
// invece di un action object, quindi:
6
// 1. Esegue la funzione ritornata
7
// 2. Passa dispatch come primo argomento
8
// 3. La funzione può dispatchare altre azioni
9
// 4. La funzione può eseguire codice asincrono

Fetching Data

Per caricare dati all’avvio dell’applicazione, si può creare un thunk che fetcha i dati e poi dispatcha un’azione per aggiornare lo state:

1
import { cartActions } from './cart-slice';
2

3
export function fetchCartData() {
4
  return async (dispatch) => {
5
    try {
6
      const response = await fetch('https://firebase-url/cart.json');
7

8
      if (!response.ok) {
9
        throw new Error('Could not fetch cart data');
10
      }
11

12
      const cartData = await response.json();
13

14
      // Assicurarsi che items sia sempre un array
15
      dispatch(cartActions.replaceCart({
16
        items: cartData.items || [],
17
        totalQuantity: cartData.totalQuantity || 0
18
      }));
19
    } catch (error) {
20
      dispatch(uiActions.showNotification({
21
        status: 'error',
22
        title: 'Error',
23
        message: 'Fetching cart data failed'
24
      }));
25
    }
26
  };
27
}

Nel componente, si dispatcha il thunk all’avvio:

1
useEffect(() => {
2
  dispatch(fetchCartData());
3
}, [dispatch]);

Evitare Loop di Sincronizzazione

Quando si fetcha il cart e lo si sostituisce nello state, si può innescare un loop se c’è un useEffect che invia il cart quando cambia. Soluzione: aggiungere un flag changed nello state:

1
const cartSlice = createSlice({
2
  name: 'cart',
3
  initialState: {
4
    items: [],
5
    totalQuantity: 0,
6
    changed: false // Flag per tracciare modifiche locali
7
  },
8
  reducers: {
9
    addItemToCart(state, action) {
10
      // ... logica per aggiungere item
11
      state.changed = true; // Solo modifiche locali
12
    },
13
    replaceCart(state, action) {
14
      // Sostituzione da backend: non è una modifica locale
15
      state.items = action.payload.items;
16
      state.totalQuantity = action.payload.totalQuantity;
17
      // changed rimane false
18
    }
19
  }
20
});
21

22
// Nel componente
23
useEffect(() => {
24
  if (isInitial.current) {
25
    isInitial.current = false;
26
    return;
27
  }
28

29
  // Invia solo se modificato localmente
30
  if (cart.changed) {
31
    dispatch(sendCartData(cart));
32
  }
33
}, [cart, dispatch]);

Redux DevTools

Redux DevTools è un’estensione del browser che permette di ispezionare lo state Redux, le azioni dispatchate e fare time-travel debugging.

Installazione

Installare l’estensione Redux DevTools dal Chrome Web Store (o equivalente per altri browser). Con Redux Toolkit funziona out-of-the-box senza configurazione aggiuntiva.

Funzionalità

1. Action Log: Visualizza tutte le azioni dispatchate in ordine cronologico
2. State Inspection: Mostra lo state corrente dopo ogni azione
3. Action Details: Mostra payload e metadati di ogni azione
4. Diff View: Mostra come lo state è cambiato dopo ogni azione
5. Time Travel: Salta a uno state precedente cliccando su un’azione e “Jump”

1
dispatch(cartActions.addItemToCart({ id: 'p1', title: 'Book', price: 10 }));

Riepilogo

• Reducer puri: I reducer devono essere funzioni pure, sincrone e senza side effects
• Side effects nei componenti: Usare useEffect per eseguire side effects quando lo state Redux cambia; dispatchare azioni dopo il completamento
• Thunks (Action Creators): Funzioni che ritornano funzioni; Redux Toolkit le esegue automaticamente passando dispatch; permettono di eseguire side effects e dispatchare azioni multiple
• Fetching data: Creare thunks che fetchano dati e dispatchano azioni per aggiornare lo state
• Evitare loop: Usare flag come changed per distinguere modifiche locali da sostituzioni da backend
• Redux DevTools: Estensione browser per ispezionare state, azioni e fare time-travel debugging; funziona out-of-the-box con Redux Toolkit