PHZ:n Javier Pons: React Context vs. Redux

React Context API ja Redux ovat React-sovelluksen tilanhallintaan käytettyjä työkaluja. PHZ:n Javier Pons kertoo, missä tilanteessa niitä kannattaa käyttää.

Tyypillisessä React-sovelluksessa tieto välitetään ylhäältä alas propsien avulla. Menetelmä saattaa kuitenkin olla turhan vaivalloinen propseille, joita tarvitaan monissa sovelluksen komponenteissa.

Propsien välittämiseen ja sovelluksen tilanhallintaan on useita vaihtoehtoja. Jotta koodia ei tarvitse refaktoroida myöhemmin, tilanhallinnan menetelmä kannattaa ottaa käyttöön heti, kun sovelluksen arkkitehtuuria lähdetään rakentamaan.

Vertailen tässä artikkelissa kahta tapaa hallita sovelluksen tilaa: React Context API ja Redux.

React Context API

React Context API on Reactin ominaisuus, joka mahdollistaa helpon ja kevyen tavan jakaa sovelluksen tila ympäri sovellusta. Se tuottaa globaaleja muuttujia, joita voi välittää eteenpäin ilman, että jokaisella tasolla tarvitsee välittää propseja manuaalisesti.

React Context API:a voidaankin käyttää datan jakamiseen useiden komponenttien välillä. Context on suunniteltu jakamaan dataa, jota voidaan pitää globaalina komponenttipuussa. Sitä voidaan käyttää jakamaan tieto esimerkiksi nykyisestä autentikoidusta käyttäjästä tai halutusta käyttökielestä.

Redux

Redux on yleensä Reactin kanssa käytettävä, ennustettava tilanhallintakirjasto. Reduxissa kaikki tilat on tallennettu samaan central storeen, joka on kaikkien komponenttien käytössä.

Redux sopii erityisen hyvin käytettäväksi isoissa sovelluksessa, jossa suuria osia sovelluksen tilasta tarvitaan monessa paikassa. Redux helpottaa sovelluksen ylläpitoa tilanteessa, jossa sovelluksen tilan pitää päivittyä säännöllisesti ja tilanpäivityksen logiikka on monimutkainen.

React Context vs. Redux

Karkeasti yleistettynä React Context API sopii käytettäväksi osassa sovellusta kuten tietokannassa ja osana Reactia. Context renderöi sovelluksen ja kaikki sen komponentit jokaisella tilan päivityksellä.

Isoon sovellukseen kannattaakin valita Redux, sillä se renderöi ainoastaan päivittyneet komponentit koko sovelluksen sijaan.

Joissain tapauksissa halutaan, että tiettyjen ominaisuuksien tila pysyy aina paikallisena. Tällöin voi olla järkevää käyttää Contextia.

Jos taas jotkin sovelluksen osat leikkaavat läpi sovelluksen, järkevin valinta on todennäköisesti Redux. Omassa työssäni olen käyttänyt Reduxia projekteissa, joissa data piti jakaa koko sovelluksen läpi. Contextia taas olen käyttänyt sovelluksissa, joissa data tarvitsi jakaa vain osaan komponenteista.


PHZ:n Javier Pons: “Olen hyvä luomaan tiimihenkeä”

Muutin kotimaastani Espanjasta Suomeen vuonna 2004, ja puhun nykyään sujuvaa suomea.

Aloitin koodaajan urana web-suunnittelijana. Vuodesta 2019 olen työskennellyt Full Stack -kehittäjänä, ja PHZ Full Stackilla aloitin vuoden 2021 keväällä.

Olen koodaajana sisukas; en luovuta ennen kuin löydän ratkaisun. Työskentelen erityisen hyvin tiimissä. Olen aktiivinen, osaan kommunikoida hyvin ja luon tiimihenkeä.

Vahvimpia teknologioitani ovat Javascript, React, Node.js, MySQL ja Amazon Web Services.


Meillä PHZ:lla on jatkuvasti työpaikkoja auki kokeneille koodaajille. Katso kaikki avoimet työpaikat täältä