delete

Contattaci

back to resources

Let's Redux React to a Game

data
13/2/2023
data progetto
autore
Massimo Lauriola
cliente
partnership
url
No items found.

In questo articolo parleremo di:

  • ReduxJs: un contenitore di stato prevedibile
  • Integrazione di ReduxJs e ReactJs

Dopo una prima panoramica passeremo a parlare dei principali concetti da conoscere per poi passare alle funzioni per creare il nostro store dello stato e come creare le logiche che ne aggiornano le proprietà.

Cos’è ReduxJs

Un pattern ed una libreria per gestire e aggiornare lo stato delle applicazioni, usando eventi chiamati «azioni», ReduxJs ti guida nella scrittura di un codice che sia prevedibile e testabile, dandoti più sicurezza nel fatto che l’applicazione si comporterà come ci si aspetta.

Caratteristiche principali di ReduxJs

Le caratteristiche principali di ReduxJs sono:

  • Predictable. ReduxJs aiuta a scrivere applicazioni che si comportano in modo coerente e sono semplici da testare;
  • Centralized. Centralizzando lo stato e la logica dell’applicazione si ha la possibilità di utilizzare potenti meccanismi come l’annulla/ripeti, la persistenza dello stato e molto altro;
  • Debuggable. Il DevTools di ReduxJs rende immediato tenere traccia di quando, dove, perché e come lo stato dell’applicazione è cambiato. Puoi tenere traccia dei cambiamenti ed usare il«viaggio nel tempo» come debug;
  • Flexible. ReduxJs è integrabile con qualsiasi Layer UI ed ha un enorme ecosistema di add ons per ogni necessità.

Librerie e tool

ReduxJs è una piccola libreria javascript standalone, ma è comunemente utilizzata con molti altri pacchetti. Utilizzeremo in particolare i tre pacchetti che vediamo.

Dato che ReduxJs è spesso utilizzato con React, React-Redux, che è il package ufficiale, renderà possibile l’interazione dei componenti React con lo store di ReduxJs permettendo la lettura di pezzi dello stato ed inviando azioni per aggiornare lo store.

Redux-toolkit è l’approccio raccomandato per scrivere la logica ReduxJs. Contiene pacchetti e funzioni essenziali per avere un codice che segua le best practice, per semplificare i task necessari, evitare gli errori più comuni e scrivere più facilmente le applicazioni ReduxJs

L’estensione ReduxJs DevTools ci mostra l’intero store con tutti gli stati oltre che lo storico degli aggiornamenti, permettendoci di fare in maniera semplice ed efficace il debug e mettendoci a disposizione una macchina del tempo con cui ripercorrere ogni cambiamento di stato.

Terminologia e Concetti

Gestione dello stato

Vediamo un piccolo componente React che agisce come contatore. Tiene traccia di un numero nel suo stato e lo incrementa quando il tasto viene cliccato.

È un’applicazione autonoma:

  • Lo stato fa da unica fonte di dati
  • La view è una descrizione dichiarativa della UI basata sullo stato corrente
  • Le azioni sono gli eventi che avvengono sulla base dell’input dell’utente

Questa semplicità però viene immediatamente meno quando abbiamo componenti multipli che hanno bisogno di condividere lo stesso stato. Questa necessità può essere risolta elevando lo stato in un componente più in alto nella gerarchia ma anche questo metodo comporta oltre che una maggiore complessità, problemi come l’effetto drill-down, in cui tra uno stato ed i componenti che ne fanno uso passano diversi livelli nella struttura della UI.

L’idea alla base di ReduxJs è invece portare tutto lo stato e le logiche di aggiornamento in un unico punto esterno alla struttura rendendo la gerarchia dei nostri componenti una grande view dove ogni componente può accedere allo stato ed inviare azioni indipendentemente dalla sua posizione nella gerarchia.

Questo va ad imporre la separazione e l’indipendenza tra la view e lo stato, dando al codice una migliore struttura e sostenibilità.

Immutabilità

Uno dei principi di ReduxJs è proprio l’immutabilità dello stato.

ReduxJs, infatti, si aspetta che ogni parte dello stato sia immutabile. Il codice deve prima effettuare una copia dello stato che vuole modificare, per poi modificare proprio la copia.

Terminologia

Actions

Cos’è una action? Possiamo definire una action come un evento che descrive qualcosa che accade nell’applicazione.

È un oggetto Javascript con una proprietà «type» a cui andremo a dare un nome descrittivo come quello nell’esempio, qualcosa che dica esattamente ciò che sta avvenendo.

Come proprietà opzionale potremo usare payload che conterrà tutte le informazioni necessarie all’azione che sta avvenendo.

L’esempio può essere letto come: è stato aggiunto «comprare latte» alle cose da fare.

Action Creators

Una action creator è una funzione che restituisce una action. Tipicamente non vorremo scrivere ogni volta l’oggetto della action, perciò andremo a utilizzare una funzione che riceverà la parte «dinamica» della action

Reducers

Un reducer può essere inteso come un ascoltatore di eventi che basandosi sul tipo della action ricevuta gestisce l’evento stesso.

I reducer devono sempre seguire determinate regole:

  • Devono ottenere il nuovo stato basandosi esclusivamente sullo stato attuale e sugli argomenti della action;
  • Non hanno il permesso di modificare lo stato, devono procedere tramite aggiornamenti «immutabili», facendo prima una copia dello stato e applicando le modifiche su quest’ultima;
  • Non devono applicare nessun tipo di logica asincrona, calcolare valori casuali o causare «effetti collaterali».

La logica dietro un reducer segue tipicamente una serie di passaggi:

  • Controlla se il reducer è interessato dalla action ricevuta;
  • Se lo è effettua una copia dello stato ed applica gli aggiornamenti;
  • Altrimenti ritorna lo stato esistente senza modifiche.

Store

L’intero stato di un’applicazione Redux risiede in un oggetto chiamato store.

Questo viene creato passando alla funzione configureStore un reducer.

Lo store ha un metodo chiamato getState che restituisce il valore dello stato corrente.

Dispatch

Lo store ha un metodo chiamato dispatch. Questo è l’unico modo per aggiornare lo stato.

Accetta come argomento una action che passando tramite il reducer produce eventualmente un aggiornamento.

Per evitare errori dovuti alla scrittura errata di una action, tipicamente si andrà ad utilizzare una action creator:

Selectors

I Selettori sono funzioni che sanno come estrarre dei pezzi specifici di informazioni dallo store.

Man mano che un’applicazione cresce in complessità, questi eviteranno logiche ripetitive dovute a parti differenti che richiedono le stesse informazioni 

Flusso di dati ReduxJs

Come vediamo da questo esempio, il flusso dei dati di Redux sarà il tipo «one-way data flow».

Partendo da uno stato iniziale, renderizzato dalla UI, ad un certo punto un’interazione produrrà il dispatch di una action che raggiungerà lo store, il reducer riceverà la action insieme allo stato esistente, produrrà secondo le logiche codificate il nuovo stato e questo verrà renderizzato nuovamente dalla UI 

Per un esempio pratico potete fare riferimento alla repository https://github.com/MaxLaw88th/three-way di cui troverete il deploy su https://github.com/MaxLaw88th/three-way

Fonti:

https://redux.js.org/introduction/getting-started

https://redux-toolkit.js.org/introduction/getting-started

https://react-redux.js.org/introduction/getting-started

Risultati

resources

Antipattern nello sviluppo software: altri errori da evitare

Antipattern nello sviluppo software: altri errori da evitare

Software Development

Antipattern nello sviluppo software: definizione, ambiti di applicazione ed esempi

Antipattern nello sviluppo software: definizione, ambiti di applicazione ed esempi

Software Development

App tattiche di supporto alla gestione dei progetti reiterativi

App tattiche di supporto alla gestione dei progetti reiterativi

App Development

Power Platform

Low Code

DevOps

Introduzione a Power Pages, il servizio Microsoft per siti web low-code

Introduzione a Power Pages, il servizio Microsoft per siti web low-code

Microsoft

Low-code

Power Platform

Introduzione a Jupyter e Seaborn per Data Analysis e Visualization

Introduzione a Jupyter e Seaborn per Data Analysis e Visualization

Jupiter

Python

Data Analysis

Data Visualization

Come utilizzare Matplotlib per la Data Visualization in Python

Come utilizzare Matplotlib per la Data Visualization in Python

Python

Data Visualization

Data Science

Data Analysis

Introduzione alla libreria Dash per Python

Introduzione alla libreria Dash per Python

Python

Data Science

Data Visualization

Data Analysis

Prime Video passa al monolite: ma allora serverless è inutile? 

Prime Video passa al monolite: ma allora serverless è inutile? 

Tableau per la Business Intelligence: introduzione, tutorial e confronto

Tableau per la Business Intelligence: introduzione, tutorial e confronto

Introduzione a Qlik Sense, piattaforma di Business Intelligence avanzata

Introduzione a Qlik Sense, piattaforma di Business Intelligence avanzata

Applicazioni Cloud Native: definizione, vantaggi e tecnologie

Applicazioni Cloud Native: definizione, vantaggi e tecnologie

Power Apps Tutorial – Case Study: come costruire una business app da zero

Power Apps Tutorial – Case Study: come costruire una business app da zero

Il futuro del gaming tra F2P, GaaS, Crypto e Play to Earn

Il futuro del gaming tra F2P, GaaS, Crypto e Play to Earn

Power Apps Basics: interfacce, implementazione & vantaggi

Power Apps Basics: interfacce, implementazione & vantaggi

Strumenti di Business Intelligence: QlikSense & Power BI a confronto

Strumenti di Business Intelligence: QlikSense & Power BI a confronto

Introduzione a Serverless: non solo Lambda Function

Introduzione a Serverless: non solo Lambda Function

Metaverso: siamo pronti a cogliere l’opportunità?

Metaverso: siamo pronti a cogliere l’opportunità?

Recap Flutter Forward 2023: le 7 novità più interessanti

Recap Flutter Forward 2023: le 7 novità più interessanti

Let's Redux React to a Game

Let's Redux React to a Game

Introduzione a PowerShell

Introduzione a PowerShell

Pago con carta: i trend dei pagamenti digitali e il futuro delle carte di credito

Pago con carta: i trend dei pagamenti digitali e il futuro delle carte di credito

NFT World: il fenomeno NFT tra metaverso, business e GameFi

NFT World: il fenomeno NFT tra metaverso, business e GameFi

Quick Escape Room

Quick Escape Room

Orbyta Invaders Ignition

Orbyta Invaders Ignition

Il lancio della nuova Identity di Orbyta parte dal Metaverso!

Il lancio della nuova Identity di Orbyta parte dal Metaverso!

development

design

metaverse

brand identity

Database a grafo in SQL Server

Database a grafo in SQL Server

Data Science Job Roles: i 4 ruoli più richiesti nel settore

Data Science Job Roles: i 4 ruoli più richiesti nel settore

Teoria dei giochi: Propagazione delle strategie

Teoria dei giochi: Propagazione delle strategie

The chosen one: .NET 5

The chosen one: .NET 5

Network Science e Social Network Analysis

Network Science e Social Network Analysis

Isolation levels on SSMS

Isolation levels on SSMS

Teoria dei Grafi

Teoria dei Grafi

Creare un podcast in automatico a partire da audio vocali e musica

Creare un podcast in automatico a partire da audio vocali e musica

Teoria dei Giochi

Teoria dei Giochi

Recommender systems: principali metodologie degli algoritmi di suggerimento

Recommender systems: principali metodologie degli algoritmi di suggerimento

Introduction to Quantum Computing and Qiskit

Introduction to Quantum Computing and Qiskit

System Versioned Tables

System Versioned Tables

Vim o non Vim

Vim o non Vim

I vantaggi di un Message Broker

I vantaggi di un Message Broker

PlayStation 5 e l'accesso ai dati: un cambio architetturale?

PlayStation 5 e l'accesso ai dati: un cambio architetturale?

Protezione dei Web Services

Protezione dei Web Services

need more info?

contattaci