React-tilanhallinta - Reduxin ongelmat ja sille vaihtoehtoiset
Gratschew, Max (2022)
Gratschew, Max
2022
Tieto- ja sähkötekniikan kandidaattiohjelma - Bachelor's Programme in Computing and Electrical Engineering
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2022-05-31
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202205265285
https://urn.fi/URN:NBN:fi:tuni-202205265285
Tiivistelmä
JavaScript-sovelluskehysten ja -kirjastojen käytön moderneissa web-sovelluksissa ollessa nykypäivää, sovelluksen tilan ylläpitäminen ja sen pitäminen yhdenmukaisena käyttöliittymän kanssa on tärkeää ja samalla suuri haaste.
Tämän tutkielman tarkoituksena oli perehtyä Reactiin, Reduxiin sekä Reduxin ongelmiin. React on JavaScript-sovelluskehys ja Redux on yleisesti Reactin kanssa käytetty tilanhallintakirjasto. Tämän lisäksi tutkielmassa perehdyttiin Reactin vaihtoehtoisiin tilanhallintakirjastoihin ja niiden periaatteisiin Reduxissa ilmenneiden ongelmien näkökulmasta.
Redux ei ole täydellinen tilanhallintakirjasto ja suosiostaan huolimatta se sisältää myös ongelmia. Boilerplate-koodin määrä, yhden globaalin storen periaate sekä raskaat rajoitteet tuovat ongelmia niin Reduxin käytössä kuin oppimiskäyrässäkin. Reactin tilanhallintaan pystytään kuitenkin käyttämään muitakin tilanhallintakirjastoja ja menetelmiä, jotka omilla tavoillaan pyrkivät vastaamaan Reduxissa ilmenneisiin ongelmiin.
Reduxin kehittäjät suosittelevat itse Redux Toolkitin käyttöä geneerisissä sovelluksissa. Redux Toolkit ei kuitenkaan pysty täyttämään jokaista käyttötarkoitusta, jolloin puhdas Redux saattaa osoittautua paremmaksi vaihtoehdoksi sovelluksen tilanhallintaan.
MobX pyrkii yksinkertaistamaan tilanhallinnan tekemällä epäjohdonmukaisen tilan tuottamisen mahdottomaksi johtamalla automaattisesti kaiken, mikä voidaan johtaa sovelluksen tilasta. MobX pyrkii muuttuvaan tilaan Reduxin pyrkiessä muuttumattomaan tilaan. MobX muuttaa ajattelutapaa ja keskittyy havaittavaan tilaan ja tilaa vastaaviin React-komponentteihin mahdollistaen Reduxia deklaratiivisemman muodon.
Recoil on vielä kokeellisessa tilassa oleva tilanhallintakirjasto ja uutuutensa puolesta se ei ole vielä saanut omaa paikkaansa yhteisössä. Recoil määrittää suunnatun graafin, joka on ortogonaalinen React-puuhun nähden. Tilamuutokset kulkevat tämän graafin juurista eli atomeista puhtaiden funktioiden eli selectorien kautta komponentteihin.
Tämän tutkielman tarkoituksena oli perehtyä Reactiin, Reduxiin sekä Reduxin ongelmiin. React on JavaScript-sovelluskehys ja Redux on yleisesti Reactin kanssa käytetty tilanhallintakirjasto. Tämän lisäksi tutkielmassa perehdyttiin Reactin vaihtoehtoisiin tilanhallintakirjastoihin ja niiden periaatteisiin Reduxissa ilmenneiden ongelmien näkökulmasta.
Redux ei ole täydellinen tilanhallintakirjasto ja suosiostaan huolimatta se sisältää myös ongelmia. Boilerplate-koodin määrä, yhden globaalin storen periaate sekä raskaat rajoitteet tuovat ongelmia niin Reduxin käytössä kuin oppimiskäyrässäkin. Reactin tilanhallintaan pystytään kuitenkin käyttämään muitakin tilanhallintakirjastoja ja menetelmiä, jotka omilla tavoillaan pyrkivät vastaamaan Reduxissa ilmenneisiin ongelmiin.
Reduxin kehittäjät suosittelevat itse Redux Toolkitin käyttöä geneerisissä sovelluksissa. Redux Toolkit ei kuitenkaan pysty täyttämään jokaista käyttötarkoitusta, jolloin puhdas Redux saattaa osoittautua paremmaksi vaihtoehdoksi sovelluksen tilanhallintaan.
MobX pyrkii yksinkertaistamaan tilanhallinnan tekemällä epäjohdonmukaisen tilan tuottamisen mahdottomaksi johtamalla automaattisesti kaiken, mikä voidaan johtaa sovelluksen tilasta. MobX pyrkii muuttuvaan tilaan Reduxin pyrkiessä muuttumattomaan tilaan. MobX muuttaa ajattelutapaa ja keskittyy havaittavaan tilaan ja tilaa vastaaviin React-komponentteihin mahdollistaen Reduxia deklaratiivisemman muodon.
Recoil on vielä kokeellisessa tilassa oleva tilanhallintakirjasto ja uutuutensa puolesta se ei ole vielä saanut omaa paikkaansa yhteisössä. Recoil määrittää suunnatun graafin, joka on ortogonaalinen React-puuhun nähden. Tilamuutokset kulkevat tämän graafin juurista eli atomeista puhtaiden funktioiden eli selectorien kautta komponentteihin.
Kokoelmat
- Kandidaatintutkielmat [8780]