Reactin tilanhallintaongelmat ja niiden ratkominen

Abstract

Nykyajan verkkosivuilta vaaditaan näyttäviä ja monimutkaisia toiminnallisuuksia sekä interaktiivisia käyttöliittymiä. Sovellukset sisältävät kuitenkin suuria määriä tietoa, jonka käsitteleminen on kriittistä sovelluksen ylläpidon ja skaalautuvuuden kannalta. Kaikki sovelluksen sisäiset tiedot tiettynä ajanhetkenä muodostavat sovelluksen tilan. Tässä työssä tutkitaan React-sovellusten tilanhallinnassa ilmeneviä ongelmia. Työn tavoitteena on selvittää, kuinka näitä ongelmia voidaan ratkaista ja ennaltaehkäistä.

Tilanhallintaan liittyy tiedon välittäminen ohjelman sisällä sekä tilan varastointi ja päivittäminen. Kun sovelluksen eri osien välillä liikkuu paljon tietoa, ohjelmasta tulee nopeasti hyvin vaikeaselkoista. Työssä tutkitaan eri keinoja, joiden avulla tiedonvälitystä voidaan selkeyttää. Näistä merkittävimmiksi havaittiin JavaScrip-tin spread-operaattori, jonka avulla tietoa voitiin välittää yksinkertaisemmassa muodossa, sekä Reactin tarjoama context-työkalu, jonka avulla välitettävän tiedon määrä vähentyi.

Työssä havaittiin, että perinteinen tilan varastoiminen hajautetusti eri puolille ohjelmaa aiheutti liikaa riippuvuuksia ohjelman eri osien välille. Tästä seurasi vaikeasti seurattavia ja virhealttiita tapahtumaketjuja tilan päivittyessä. Työssä löydettiin yksittäisiin ongelmiin teknisiä ratkaisuja, mutta käytännön tasolla ohjelman hahmottamisen ja ylläpidon havaittiin muuttuvan lähes mahdottomaksi ongelmien kasaantuessa. Tähän parhaaksi ratkaisuksi havaittiin Redux-kirjasto, joka tarjoaa sovellukselle globaalin tietovaraston. Kun ohjelman tila säilötään keskitetysti yhdessä paikassa, ohjelman eri osat voivat käsitellä globaalia tilaa toisistaan riippumatta. Työssä päädyttiin johtopäätökseen, että pienissä sovelluksissa Reactin tarjoamat ominaisuudet ja työkalut ovat riittäviä, mutta suuremmissa sovelluksissa tilanhallinnan kirjastojen käyttö on lähes välttämätöntä.