Redux Toolkit: Semplificare la Gestione dello State in React

Redux è uno strumento popolare per la gestione dello state nell’ecosistema React. Tuttavia, l’utilizzo di Redux tradizionale è spesso criticato per la sua verbosità e complessità, richiedendo molti passaggi per creare uno store, molteplici file con codice ripetitivo e una mancanza di standard chiari per la scrittura della logica. Redux Toolkit nasce per risolvere questi problemi. Sviluppato dallo stesso team di ReduxJS, Redux Toolkit consente di scrivere codice Redux in modo rapido, completo e secondo standard uniformi.

Redux Toolkit non solo semplifica la creazione dello store, ma integra anche alcuni middleware e Redux Devtool per il debug e il monitoraggio degli aggiornamenti dello state. Ciò consente di risparmiare tempo e fatica agli sviluppatori.

La dichiarazione di action type in Redux tradizionale è piuttosto prolissa e questo valore viene utilizzato solo durante la creazione di azioni e nel reducer. Redux Toolkit fornisce la funzione createAction per creare azioni in modo più conciso. Questa funzione accetta una stringa e restituisce una funzione che crea un’azione con il tipo corrispondente alla stringa passata.

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

Inoltre, createAction consente di accedere facilmente al tipo di azione, risparmiando ulteriore codice:

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

Redux Toolkit offre anche la funzione createReducer per creare reducer in modo più semplice e intuitivo rispetto al metodo tradizionale. createReducer consente di inizializzare un reducer con una logica intuitiva come un oggetto di riferimento, dove ogni chiave è un tipo e il valore è una funzione reducer.

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

createReducer accetta due parametri: il valore iniziale dello state e l’oggetto che consente al reducer di ascoltare e aggiornare lo state. Grazie alle proprietà calcolate di ES6, possiamo riscrivere il codice precedente in modo più conciso:

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

Grazie a createAction e createReducer, la creazione dello store in Redux Toolkit diventa molto più semplice e intuitiva rispetto a Redux tradizionale. Il codice è organizzato in modo chiaro, leggibile e facile da manutenere. Redux Toolkit semplifica la gestione dello state nelle applicazioni React, consentendo agli sviluppatori di concentrarsi sulla logica di business piuttosto che sul codice boilerplate.

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store