Due idee di base in Redux

Prima di iniziare a studiare la libreria Redux, facciamo conoscenza con le sue due idee di base. La prima idea, riguardante la gestione dello stato, la esamineremo con l'esempio di un normale contatore con stato in React:

function Counter() {
	// State
	const [count, setCount] = useState(0)

	// Action:
	function clickHandler() {
		setCount(count + 1)
	}

	// View:
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

In questo codice vediamo lo stato per la variabile count - questa è la fonte della verità per il contatore. Poi vediamo una azione (action) - un evento, che al click dell'utente provoca un aggiornamento dello stato. E, infine, la vista (view), con la quale visualizziamo l'interfaccia utente.

Quindi lo schema è piuttosto semplice: il pulsante viene premuto - lo stato count (State) alla pressione (Action) cambia, di conseguenza cambia la vista (View) - nel nostro caso è il numero sullo schermo.

Tuttavia, tutto sarà più complicato se abbiamo molti componenti che devono utilizzare lo stesso stato. Si può, certamente, ad esempio sollevare lo stato ai componenti genitori, ma una tale soluzione non sempre può risolvere il problema. Redux in questo caso ci propone di creare un unico posto nell'applicazione, che contenga lo stato globale e determinati pattern di comportamento durante l'aggiornamento di questo stato. Proprio in questo risiede la prima idea di base (!).

La seconda idea è legata all'immutabilità, cioè all'immutabilità dei dati. Voi, certamente, ricordate dal JavaScript, che array e oggetti possono essere modificati. La modifica diretta dei dati in Redux, come in altri framework, è considerata una cattiva pratica e può portare a conseguenze imprevedibili. Pertanto in Redux i nostri oggetti e array iniziali devono rimanere immutabili, e possiamo modificare solo le loro copie.

Raccontate in cosa consiste la prima idea di base di Redux.

Raccontate in cosa consiste la seconda idea di base di Redux.