Redux: Gestione dello State

Introduzione

Redux è un sistema di gestione dello state per dati cross-component o app-wide. Funziona come alternativa a React Context, offrendo un approccio strutturato per gestire state condiviso attraverso un unico store centrale. Questo articolo esplora come funziona Redux, il suo flusso di dati e come utilizzarlo con Redux Toolkit per semplificare la configurazione.

Tipi di State

Lo state in React può essere classificato in tre categorie principali: local state, cross-component state e app-wide state.

Il local state è gestito all’interno di un singolo componente con useState o useReducer. Esempi includono input utente o toggle di visibilità che interessano solo quel componente.

Lo state cross-component interessa più componenti. Ad esempio, uno stato che controlla la visibilità di un modal può essere gestito passando props attraverso la gerarchia dei componenti (prop drilling) o usando Context/Redux.

Lo app-wide state interessa l’intera applicazione. L’autenticazione utente è un esempio tipico: quando l’utente si autentica, molti componenti devono reagire a questo cambiamento.

Come Funziona Redux

Redux si basa su tre concetti fondamentali: store centrale, reducer e actions.

Store Centrale

Redux utilizza un unico store centrale per tutta l’applicazione. Questo store contiene tutto lo state cross-component e app-wide. Non si creano mai più store: c’è esattamente un store per applicazione.

Reducer

Il reducer è una funzione pura responsabile di aggiornare lo state. Riceve due parametri:

• Lo state corrente
• L’action dispatchata

Il reducer deve sempre restituire un nuovo oggetto state, mai mutare lo state esistente. È una funzione pura: stessi input producono sempre lo stesso output, senza side effects.

Actions

Le actions sono oggetti JavaScript semplici che descrivono quale operazione deve essere eseguita. Hanno sempre una proprietà type che identifica l’azione. I componenti dispatchano actions, che vengono inoltrate al reducer, che esegue l’operazione e produce un nuovo state.

Flusso di Dati

Il flusso in Redux segue questo pattern:

1. I componenti si sottoscrivono allo store per ricevere aggiornamenti quando lo state cambia
2. I componenti dispatchano actions per modificare lo state
3. Le actions vengono inoltrate al reducer
4. Il reducer produce un nuovo state basato sull’action
5. Lo store viene aggiornato con il nuovo state
6. I componenti sottoscritti vengono notificati e si ri-renderizzano

1
// Import di Redux
2
const redux = require('redux');
3

4
// Reducer function
5
const counterReducer = (state = { counter: 0 }, action) => {
6
  if (action.type === 'increment') {
7
    return {
8
      counter: state.counter + 1
9
    };
10
  }
11

12
  if (action.type === 'decrement') {
13
    return {
14
      counter: state.counter - 1
15
    };
16
  }
17

18
  return state;
19
};
20

21
// Creazione dello store
22
const store = redux.createStore(counterReducer);
23

24
// Subscriber function
25
const counterSubscriber = () => {
26
  const latestState = store.getState();
27
  console.log(latestState);
28
};
29

30
// Sottoscrizione ai cambiamenti
31
store.subscribe(counterSubscriber);
32

33
// Dispatch di actions
34
store.dispatch({ type: 'increment' });
35
store.dispatch({ type: 'decrement' });

Redux in React

Per utilizzare Redux in React, si installano due package: redux e react-redux. Il secondo semplifica l’integrazione tra Redux e React.

Provider

Il componente Provider di react-redux avvolge l’applicazione e fornisce lo store a tutti i componenti figli:

1
import { Provider } from 'react-redux';
2
import store from './store/index';
3

4
function App() {
5
  return (
6
    <Provider store={store}>
7
      <Counter />
8
    </Provider>
9
  );
10
}

Solo i componenti dentro Provider (e i loro discendenti) possono accedere allo store.

useSelector

L’hook useSelector permette ai componenti di leggere dati dallo store. Accetta una funzione che riceve lo state e restituisce la porzione di state desiderata:

1
import { useSelector } from 'react-redux';
2

3
function Counter() {
4
  const counter = useSelector((state) => state.counter);
5

6
  return <div>{counter}</div>;
7
}

useSelector configura automaticamente una sottoscrizione: quando lo state cambia, il componente si ri-renderizza. La sottoscrizione viene rimossa automaticamente quando il componente viene smontato.

useDispatch

L’hook useDispatch restituisce la funzione dispatch per inviare actions allo store:

1
import { useDispatch } from 'react-redux';
2

3
function Counter() {
4
  const dispatch = useDispatch();
5

6
  const incrementHandler = () => {
7
    dispatch({ type: 'increment' });
8
  };
9

10
  return <button onClick={incrementHandler}>Increment</button>;
11
}

1
import { createStore } from 'redux';
2

3
const initialState = { counter: 0 };
4

5
const counterReducer = (state = initialState, action) => {
6
  if (action.type === 'increment') {
7
    return { counter: state.counter + 1 };
8
  }
9
  if (action.type === 'decrement') {
10
    return { counter: state.counter - 1 };
11
  }
12
  return state;
13
};
14

15
const store = createStore(counterReducer);
16

17
export default store;

1
import { useSelector, useDispatch } from 'react-redux';
2

3
function Counter() {
4
  const counter = useSelector((state) => state.counter);
5
  const dispatch = useDispatch();
6

7
  const incrementHandler = () => {
8
    dispatch({ type: 'increment' });
9
  };
10

11
  const decrementHandler = () => {
12
    dispatch({ type: 'decrement' });
13
  };
14

15
  return (
16
    <div>
17
      <div>{counter}</div>
18
      <button onClick={incrementHandler}>Increment</button>
19
      <button onClick={decrementHandler}>Decrement</button>
20
    </div>
21
  );
22
}

Actions con Payload

Le actions possono trasportare dati aggiuntivi oltre al type. Questi dati vengono chiamati payload:

1
// Dispatch di action con payload
2
dispatch({
3
  type: 'increase',
4
  amount: 5
5
});
6

7
// Nel reducer
8
const counterReducer = (state = initialState, action) => {
9
  if (action.type === 'increase') {
10
    return {
11
      counter: state.counter + action.amount
12
    };
13
  }
14
  // ...
15
};

Il nome della proprietà del payload è arbitrario (amount, value, data, ecc.), ma deve corrispondere tra il dispatch e l’accesso nel reducer.

State Immutabile

Il reducer non deve mai mutare lo state esistente. Deve sempre restituire un nuovo oggetto:

1
// ❌ SBAGLIATO: muta lo state esistente
2
const counterReducer = (state = initialState, action) => {
3
  if (action.type === 'increment') {
4
    state.counter++; // Mutazione!
5
    return state;
6
  }
7
  return state;
8
};
9

10
// ✅ CORRETTO: restituisce un nuovo oggetto
11
const counterReducer = (state = initialState, action) => {
12
  if (action.type === 'increment') {
13
    return {
14
      counter: state.counter + 1
15
    };
16
  }
17
  return state;
18
};

Quando si aggiorna una parte dello state, è necessario copiare tutte le altre proprietà:

1
const initialState = {
2
  counter: 0,
3
  showCounter: true
4
};
5

6
const counterReducer = (state = initialState, action) => {
7
  if (action.type === 'increment') {
8
    return {
9
      counter: state.counter + 1,
10
      showCounter: state.showCounter // Copia le altre proprietà!
11
    };
12
  }
13
  if (action.type === 'toggle') {
14
    return {
15
      counter: state.counter, // Copia le altre proprietà!
16
      showCounter: !state.showCounter
17
    };
18
  }
19
  return state;
20
};

Redux sostituisce lo state, non lo merge. Se si omette una proprietà, quella proprietà viene persa.

Redux Toolkit

Redux Toolkit semplifica la configurazione e l’utilizzo di Redux, riducendo il boilerplate e prevenendo errori comuni.

createSlice

createSlice combina la definizione del reducer, delle actions e degli action creators in un’unico oggetto:

1
import { createSlice } from '@reduxjs/toolkit';
2

3
const counterSlice = createSlice({
4
  name: 'counter',
5
  initialState: { counter: 0, showCounter: true },
6
  reducers: {
7
    increment(state) {
8
      state.counter++;
9
    },
10
    decrement(state) {
11
      state.counter--;
12
    },
13
    increase(state, action) {
14
      state.counter = state.counter + action.payload;
15
    },
16
    toggleCounter(state) {
17
      state.showCounter = !state.showCounter;
18
    }
19
  }
20
});

Con Redux Toolkit, è permesso “mutare” lo state nei reducer perché internamente viene usato Immer, che traduce il codice in operazioni immutabili. Il codice risulta più semplice da scrivere e leggere.

Action Creators Automatici

createSlice genera automaticamente gli action creators:

1
// Le actions sono disponibili su counterSlice.actions
2
export const counterActions = counterSlice.actions;
3

4
// Utilizzo nei componenti
5
import { counterActions } from './store/index';
6

7
function Counter() {
8
  const dispatch = useDispatch();
9

10
  const incrementHandler = () => {
11
    dispatch(counterActions.increment());
12
  };
13

14
  const increaseHandler = () => {
15
    dispatch(counterActions.increase(5)); // 5 viene messo in action.payload
16
  };
17
}

Gli action creators generati automaticamente evitano errori di typo negli identificatori delle actions.

configureStore

configureStore semplifica la creazione dello store e la combinazione di più reducer:

1
import { configureStore } from '@reduxjs/toolkit';
2
import counterSlice from './counter-slice';
3
import authSlice from './auth-slice';
4

5
const store = configureStore({
6
  reducer: {
7
    counter: counterSlice.reducer,
8
    auth: authSlice.reducer
9
  }
10
});

Quando si usano più slice, lo state viene organizzato per chiave:

1
// Accesso allo state
2
const counter = useSelector((state) => state.counter.counter);
3
const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

1
import { createSlice } from '@reduxjs/toolkit';
2

3
const initialCounterState = { counter: 0, showCounter: true };
4

5
const counterSlice = createSlice({
6
  name: 'counter',
7
  initialState: initialCounterState,
8
  reducers: {
9
    increment(state) {
10
      state.counter++;
11
    },
12
    decrement(state) {
13
      state.counter--;
14
    },
15
    increase(state, action) {
16
      state.counter = state.counter + action.payload;
17
    },
18
    toggleCounter(state) {
19
      state.showCounter = !state.showCounter;
20
    }
21
  }
22
});
23

24
export const counterActions = counterSlice.actions;
25
export default counterSlice;

1
import { createSlice } from '@reduxjs/toolkit';
2

3
const initialAuthState = { isAuthenticated: false };
4

5
const authSlice = createSlice({
6
  name: 'auth',
7
  initialState: initialAuthState,
8
  reducers: {
9
    login(state) {
10
      state.isAuthenticated = true;
11
    },
12
    logout(state) {
13
      state.isAuthenticated = false;
14
    }
15
  }
16
});
17

18
export const authActions = authSlice.actions;
19
export default authSlice;

1
import { configureStore } from '@reduxjs/toolkit';
2
import counterSlice from './counter-slice';
3
import authSlice from './auth-slice';
4

5
const store = configureStore({
6
  reducer: {
7
    counter: counterSlice.reducer,
8
    auth: authSlice.reducer
9
  }
10
});
11

12
export default store;

1
import { useSelector, useDispatch } from 'react-redux';
2
import { counterActions } from './store/counter-slice';
3

4
function Counter() {
5
  const counter = useSelector((state) => state.counter.counter);
6
  const showCounter = useSelector((state) => state.counter.showCounter);
7
  const dispatch = useDispatch();
8

9
  const incrementHandler = () => {
10
    dispatch(counterActions.increment());
11
  };
12

13
  const increaseHandler = () => {
14
    dispatch(counterActions.increase(5));
15
  };
16

17
  return (
18
    <div>
19
      {showCounter && <div>{counter}</div>}
20
      <button onClick={incrementHandler}>Increment</button>
21
      <button onClick={increaseHandler}>Increase by 5</button>
22
    </div>
23
  );
24
}

Class-Based Components

Per i class-based components, react-redux fornisce la funzione connect invece degli hooks:

1
import { connect } from 'react-redux';
2
import { counterActions } from './store/counter-slice';
3

4
class Counter extends Component {
5
  incrementHandler() {
6
    this.props.increment();
7
  }
8

9
  render() {
10
    return (
11
      <div>
12
        <div>{this.props.counter}</div>
13
        <button onClick={this.incrementHandler.bind(this)}>Increment</button>
14
      </div>
15
    );
16
  }
17
}
18

19
// Mappa lo state Redux alle props
20
const mapStateToProps = (state) => {
21
  return {
22
    counter: state.counter.counter
23
  };
24
};
25

26
// Mappa le funzioni dispatch alle props
27
const mapDispatchToProps = (dispatch) => {
28
  return {
29
    increment: () => dispatch(counterActions.increment())
30
  };
31
};
32

33
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect è un higher-order component che avvolge il componente e fornisce le props mappate dallo store.

Organizzazione del Codice

In applicazioni più grandi, è utile organizzare i slice in file separati:

1
store/
2
  ├── index.js          # Configurazione dello store
3
  ├── counter-slice.js  # Slice per il counter
4
  └── auth-slice.js     # Slice per l'autenticazione

Ogni slice esporta le proprie actions e il reducer. Lo store principale importa e combina tutti i reducer.

Riepilogo

Redux gestisce state cross-component attraverso un store centrale unico. I componenti dispatchano actions che vengono processate da reducer che producono nuovo state. I componenti si sottoscrivono allo store per ricevere aggiornamenti.

Redux Toolkit semplifica l’uso di Redux con createSlice (combina reducer e action creators), configureStore (crea lo store combinando più reducer) e supporto per “mutazioni” sicure grazie a Immer.

Gli hook useSelector e useDispatch permettono ai componenti funzionali di accedere allo store. Per i class-based components si usa connect.

Il reducer deve sempre restituire un nuovo oggetto state, mai mutare lo state esistente. Con Redux Toolkit, le “mutazioni” sono permesse perché vengono tradotte automaticamente in operazioni immutabili.