Redux-tilanhallinnan korvaaminen ReactJS:n uusilla ominaisuuksilla
Aarnio, Tiia (2019)
2019
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2019060314489
https://urn.fi/URN:NBN:fi:amk-2019060314489
Tiivistelmä
Opinnäytetyön tavoitteena oli toimittaa toimeksiantajalle selvitys Redux-tilanhallinnan korvaamisesta ReactJS:n uusilla ominaisuuksilla. Selvityksessä kartoitettiin ReactJS:n uusien ominaisuuksien hyödyt ja haitat sekä kypsyys tuotantokäyttöön. Pohdittiin myös, millä tavoin uusien ominaisuuksien mahdollinen käyttöönotto kannattaisi toteuttaa sovelluksessa, jossa Redux-tilanhallinta on tällä hetkellä jo käytössä. Lisäksi selvityksessä vertailtiin sovelluksen koodin luettavuutta sekä DOM-rakenteen selkeyttä Redux-tilanhallinnasta luopumisen jälkeen.
Selvitys toteutettiin referenssitoteutuksen avulla, joka vastasi pääpiirteiltään perinteistä React-sovellusta, jossa on käytössä yksinkertainen Redux-tilanhallinta. Redux-tilanhallinnan lisäksi referenssitoteutukseen toteutettiin muutamia komponentteja, joissa käytettiin elämänkaarifunktioita ja Reactin paikallista tilaa. Tällä tavoin ReactJS:n uusia ominaisuuksia saatiin vertailtua kattavammin.
ReactJS:n uudet ominaisuudet otettiin käyttöön referenssisovelluksesta luotuun kopioon. Kopioidusta sovelluksesta poistettiin Redux sekä kaikki luokkakomponentit muutettiin funktiokomponenteiksi. Globaali tilanhallinta, komponenttien paikallinen tila sekä elämänkaarifunktiot toteutettiin uudestaan käyttäen ReactJS:n uudistunutta kontekstia sekä Hooks-ominaisuuden tarjoamia toiminnallisuuksia.
Selvityksen tuloksena voitiin nähdä, että ReactJS:n uusia ominaisuuksia käyttämällä saatiin sovelluksen koodirivien määrää merkittävästi vähennettyä sekä DOM-rakenteen selkeyttä parannettua. Työssä tutkitut uudet ominaisuudet vaikuttivat käytössä stabiileilta, mutta todettiin kuitenkin, ettei niiden käyttöönotto tuotannossa olisi vielä täysin riskitöntä.
Selvitys toteutettiin referenssitoteutuksen avulla, joka vastasi pääpiirteiltään perinteistä React-sovellusta, jossa on käytössä yksinkertainen Redux-tilanhallinta. Redux-tilanhallinnan lisäksi referenssitoteutukseen toteutettiin muutamia komponentteja, joissa käytettiin elämänkaarifunktioita ja Reactin paikallista tilaa. Tällä tavoin ReactJS:n uusia ominaisuuksia saatiin vertailtua kattavammin.
ReactJS:n uudet ominaisuudet otettiin käyttöön referenssisovelluksesta luotuun kopioon. Kopioidusta sovelluksesta poistettiin Redux sekä kaikki luokkakomponentit muutettiin funktiokomponenteiksi. Globaali tilanhallinta, komponenttien paikallinen tila sekä elämänkaarifunktiot toteutettiin uudestaan käyttäen ReactJS:n uudistunutta kontekstia sekä Hooks-ominaisuuden tarjoamia toiminnallisuuksia.
Selvityksen tuloksena voitiin nähdä, että ReactJS:n uusia ominaisuuksia käyttämällä saatiin sovelluksen koodirivien määrää merkittävästi vähennettyä sekä DOM-rakenteen selkeyttä parannettua. Työssä tutkitut uudet ominaisuudet vaikuttivat käytössä stabiileilta, mutta todettiin kuitenkin, ettei niiden käyttöönotto tuotannossa olisi vielä täysin riskitöntä.