Aggiunta di logica aggiuntiva all'applicazione Redux

In questa lezione aggiungeremo l'ultimo componente alla nostra applicazione. Per essere più precisi, aggiungeremo al prodotto la reazione dell'utente, che lo ha ordinato o ha letto informazioni su di esso.

Apriamo la nostra applicazione di prodotti. Come nel caso del nome del venditore, abbiamo bisogno di mostrare le reazioni degli utenti in più punti dell'applicazione. Ciò significa che avremo bisogno di un componente separato. Quindi iniziamo creando nella cartella products il file UserReactions.jsx. Per cominciare, scriviamo al suo interno un oggetto che conterrà le nostre reazioni:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

E sotto iniziamo a scrivere la funzione stessa, a cui passeremo la slice product:

export const UserReactions = ({ product }) => {}

Ora tra le parentesi graffe scriviamo il corpo della funzione UserReactions. Per fare questo iteriamo usando map le coppie chiave-valore del nostro reactionObj, per ognuna otterremo la designazione per il pulsante ('+', '+/-' o '-') e il valore numerico di una particolare reazione (lo andremo a prendere da product nello store per nome della reazione):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

E dopo questo, alla fine del codice della funzione, restituiamo il markup con i pulsanti userReactions:

return <div>{userReactions}</div>

E aggiungiamo anche un po' di stili in index.css:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

Se tutto ciò sembra un po' confuso, non preoccupatevi, in seguito diventerà tutto molto più chiaro.

Aprite la vostra applicazione sugli studenti. Nella vostra applicazione ci sarà la possibilità per gli utenti di scegliere tra gli studenti il capogruppo e il capitano della squadra sportiva. Quindi, dopo aver studiato il materiale della lezione, create nella cartella students il file UserVotes.jsx. All'inizio del file create un oggetto votesObj, in cui avrete due proprietà - leader e captain, con valori GL e TC, come designazione per i pulsanti.

Sotto nel file, dopo la definizione dell'oggetto votesObj, scrivete il codice della funzione UserVotes, per analogia con il materiale di questa lezione.