Actionin lähettäminen Redux-sovelluksessa

Nyt meillä on reduceri reaktioiden slice:n päivittämiseksi. Seuraavaksi meidän on lisättävä actionin lähetys, joka aktivoituu, kun käyttäjä klikkaa reaktiopainiketta. Mutta ennen kuin kaikki toimii täysin, meidän on tehtävä muutamia muutoksia.

Avataan tuotesovelluksemme, ja siellä tiedosto productsSlice.js. Katso määritelmää initialState. Näetkö? Objekteissa ei ole reaktioiden ominaisuutta. Korjataan tämä asettaen kunkin reaktion laskurit arvoon 0:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Lisää toiseen alustusobjektiin ominaisuus reactions itse. Tämä sama ominaisuus on lisättävä alemmas koodiin reducerille productAdded, jotta uusissa tuotteissa on myös tämä toiminnallisuus. Tehdään tämä sen metodille prepare:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Nyt siirrytään actionin lähetykseen. Avataan tiedosto UserReactions.jsx, sitten tuodaan siihen hook useDispatch ja reactionClicked:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Koodin alussa funktion UserReactions rungossa ensimmäisellä rivillä (ennen const userReactions ... ) kirjoitetaan:

const dispatch = useDispatch()

Ja asetetaan reaktiopainikkeelle lähetys reactionClicked klikkauksen yhteydessä, samalla lähetetään tuotteen id ja klikatun reaktion nimi:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Nyt meidän on vielä näytettävä komponentti reaktioilla markupissamme sivuillemme. Tehdään tämä tiedostossa ProductsList.jsx elementin Link edellä:

<UserReactions product={product} />

Ja täsmälleen samalla tavalla elementin Link edellä tuotesivulla tiedostossa ProductPage.jsx:

<UserReactions product={product} />

Nyt kun kaikki on kunnossa, voimme käynnistää sovelluksemme. Kokeillaan klikata reaktiopainikkeita. Voimme lisätä uuden tuotteen ja myös painella niitä. Nyt missä tahansa klikkaammekaan reaktiopainikkeita, muuttuneet arvot näytetään kyseiselle tuotteelle kaikilla sivuilla. Katso erillistä tuotesivua (jossa klikkasit reaktioita) ja niiden listasivua ja päinvastoin, kaikilla sivuilla reaktioiden määrä tietyn tuotteen kohdalla on sama.

Tämä oppitunti oli luvun lopettava datan käsittelyyn liittyen Reduxissa. Työskentelimme syventävämmin datan kanssa Redux store:ssa ja nyt tiedämme, kuinka lisätä tarvitsemamme toiminnallisuus sovellukseen ja käyttää dataa React komponenteissa.

Avaa opiskelijasovelluksesi. Tiedostossa studensSlice.js lisää alustusobjekteille ominaisuus votes vastaavine kentineen. Tee tämä myös reducerille studentAdded.

Funktion UserVotes sisällä tiedostossa UserVotes.jsx määritä dispatch hookille useDispatch ja tee actionin voteClicked lähetys klikatessa äänestyspainikkeita, välitä sille opiskelijan id ja vote:n nimi, vastaavasti kuin oppitunnissa on esitetty.

Tulosta äänestyspainikkeet markuppiin komponenteissa StudentsList ja StudentPage.