Tilanhallinta React-sovelluksissa

Abstract

Tilanhallinta mahdollistaa sovelluksen datan yksisuuntaisen kulun, nopeuttaa sen kehitystä ja testausta ja varmistaa, että dataan päästään käsiksi missä vaan sitä tarvitaan. React-sovelluksen tilanhallintaan on kehi- tetty useita kirjastoja. Opinnäytetyössä selvitettiin kolmen valitun tilanhallintakirjaston vahvuudet ja heik- koudet ja esitettiin niiden hyvät käytänteet. Näitä kolmea kirjastoa vertailtiin ja autettiin kehittäjiä valitse- maan oikea tilanhallintakirjasto, joka vastaa oman projektin tarpeisiin.

Opinnäytetyössä toteutettiin Reactilla pieni esimerkkisovellus, jonka teemana oli tehtävälista. Sen jälkeen tilanhallinta toteutettiin esimerkkisovellukseen opinnäytetyöhön valituilla tilanhallintakirjastoilla. Sovelluk- sen tilaan haluttiin viedä tehtävät ja niitä manipuloivat actionit. Lopuksi tilanhallintakirjastoja vertailtiin asetettujen aihealueiden mukaan.

Opinnäytetyön tilanhallintakirjastojen vertailusta voitiin todeta, että Zustand on kirjastoista nopein oppia, koska se muistuttaa käytänteiltään paljon Reactin komponentin tilanhallintaa. Zustand oli kompaktein kir- jastoista ja soveltuu parhaiten yksinkertaisen sovelluksen tilanhallintaan. Redux oli käytänteiltään saman- kaltainen kuin Zustand, mutta tarjosi systemaattisemman arkkitehtuurin tilanhallinnan toteutukseen ja enemmän ominaisuuksia. Tämän takia Reduxin todettiin olevan hyvä valinta monimutkaisempaan sovelluk- seen. MobX:n todettiin tarjoavan vaihtoehto muille opinnäytetyön kirjastoille, jotka perustuvat funktionaa- liseen ohjelmointiin. MobX perustuu olio-ohjelmointiin ja luokkapohjaisuuteen ja sen koettiin antavan ke- hittäjälle eniten vapautta tilanhallinnan toteutuksen ja muokattavuuden suhteen.