Angular-sovelluksen tilanhallinta NgRx-kirjastolla

Abstract

Opinnäytetyössä käsitellään Angular-sovellusten tilanhallintaa NgRx-kirjastolla. Opinnäytetyön toimeksiantaja oli tamperelainen DiCode Oy. DiCoden projekteissa oli ollut haasteita sovelluksen tilanhallinnassa. Eri puolilla sovellusta esitettävän saman tilan tuli olla käyttäjän toimista riippumatta aina ajan tasalla. Tämän lisäksi tilanhallinnan tuli olla mahdollisimman optimoitua. Ratkaisuksi tällaisiin haasteisiin mietittiin tilanhallintakirjastoa.

Tilanhallintakirjastojen käytöstä oli kuultu paljon hyvää. Tämän vuoksi opinnäytetyössä haluttiin selvittää, pitävätkö nämä huhut paikkansa ja millaisia ratkaisuja kirjasto tarjosi sovellusten tilan hallitsemiseksi. Koska DiCodella kehitettyjen sovellusten käyttöliittymät oli toteutettu Angular-kehyksellä, päädyttiin selvitystyössä tutkimaan Angular-sovelluksille suunnattua NgRx-tilanhallintakirjastoa. Tavoitteena oli löytää ratkaisuja sovelluksen tilanhallinnallisiin haasteisiin nimenomaan NgRx-kirjastoa hyödyntämällä.

NgRx-kirjaston tarpeellisuuden ja toimivuuden selvittämiseksi ohjelmoitiin pieni esimerkkisovellus. Esimerkkisovelluksen tilanhallinta toteutettiin käyttämällä NgRx-kirjastoa. Sovelluksessa käytettiin NgRx:n tehtäviä, vähentäjiä, varastoa ja valitsimia. Tilanhallinnan toteuttaminen NgRx:llä vaatii yleisen käsityksen mukaan paljon pohjakoodia, mutta sen määrää ei opinnäytetyön edetessä pidetty kuitenkaan liiallisena. Lisäksi esimerkkisovelluksen kehittämisen aikana miellyttiin ajatukseen, jossa sovelluksen tilaa hallitaan sovelluksessa lähetettävien tehtävien kautta.

NgRx on monipuolinen kirjasto Angular-sovelluksen tilanhallintaan. Sen avulla voidaan sovelluksen tilanhallinta eriyttää helposti omaksi sovellusosakseen. NgRx myös tukee Angularin moduuliajattelua, ja sen käyttäminen ohjaa yleisesti hyvänä pidettyyn Angular-sovelluksen sovellusarkkitehtuuriin. NgRx:n käyttäminen edellyttää kuitenkin erinomaista RxJS-kirjaston tuntemusta. Selvitystyöhön tehty esimerkkisovellus on pieni sovellus. Tämän vuoksi tarkka kuva NgRx:n tarpeellisuudesta ja toimivuudesta saadaan, kun kirjasto otetaan käyttöön monimutkaisessa sovelluksessa.

This thesis deals with managing application state in an Angular application with NgRx. The topic of this thesis comes from a customer. The commission was given by DiCode Oy which is a company located in Tampere. Some of the projects at DiCode had had application’s state related challenges. This was due to the fact that usually the state of the application should be up-to-date, no matter what the user’s actions have been. The state management should also be as optimized as possible. Studying and testing the pros and cons of using NgRx in Angular applications seemed to provide possible solutions to these challenges.

Using an application state management library in programming has recently been addressed as a functional and a useful tool in the field of software development. One of the goals of this thesis was to examine how accurate these assumptions were, and how useful an application’s state management library would really be. Because the front end applications produced in DiCode Oy were mainly Angular-based, the focus of this thesis was to study NgRx.

A small exemplary application was programmed to determine the necessity and functionality of the NgRx library. The state management of the exemplary application was implemented using the NgRx library. The application used NgRx’s actions, reducers, store and selectors. It is known that NgRx requires plenty of boilerplate code, but its amount was not considered excessive. The idea of controlling the application state in actions transmitted through-out the application was considered powerful yet clear.

NgRx is a versatile library for managing state in Angular applications. It can be used to easily separate the application’s state management into own section of the application. NgRx also supports Angular’s modular thinking. It guides the developer to Angular’s commonly preferred application architecture. However, using NgRx requires an excellent knowledge of the RxJS library. Additionally, the exemplary application developed for this thesis was a relatively small application. Therefore, an exact picture of the necessity and functionality of NgRx will be obtained when the library is used in a more complex application.