Redux-kirjaston hyödyt React-sovelluksessa

Abstract

Opinnäytetyössä tutkittiin Redux-kirjaston tilanhallinnan tuomia etuja React-sovellukselle. Tavoitteena oli vertailla tilanhallintaa ilman Redux-kirjastoa ja Redux-kirjaston kanssa, ja selvittää erot sovelluksen suorituskyvyssä ja ohjelmiston kehittämisessä.

Menetelmänä oli luoda ja vertailla tilanhallintojen toimintaperiaatteita noudattavia lähdekoodeja ja kaavioita. Tilanhallinnan vaikutuksia komponentteihin tutkittiin vertailemalla erilaisia toteutustapoja, jotka tuottivat samanlaisen toiminnallisuuden sovelluksessa.

React-kirjaston oma tilanhallinta toimii asettamalla tila yhden komponentin hallinnoitavaksi. Kaikkien tilaa käyttävien komponenttien on oltava tilaa hallinoivan komponentin sisällä. Redux-kirjaston tilanhallinta lisää mahdollisuuden käyttää komponenttien ulkopuolisia tiloja. Komponentti kuuntelee Redux-kirjaston tilanhallinnan tilaa, kuten se kuuntelisi toisen komponentin hallinnoimaa tilaa. Tilan arvon vaihtuminen saa aikaan tilasta riippuvaisen komponentin päivittymisen, milloin myös komponentin sisältävät muut komponentit päivittyvät.

Redux-kirjaston tilanhallinta tarjoaa mahdollisuuden luoda tehokas keskitetty varasto jokaisen komponentin käytettäväksi. Kehitysnäkökulmasta aikaa ei kulu komponenttien järjestelyn eli komposition suunnitteluun yhtä paljon kuin pelkkää React-kirjaston omaa tilanhallintaa käyttäessä. Redux-kirjastolla voidaan toteuttaa suorituskyvyltään tehokkaampia sovelluksia riippuen komponenttien kompositiosta. Redux-kirjaston tilanhallinnalla voidaan yksinkertaistaa komponenttien komposition dynamiikkaa, jolloin lähdekoodin kehittäminen on tehokkaampaa.

This thesis studied benefits of state management of Redux library in React applications. The goals were to research the differences between React applications with and without utilizing the Redux library, and to research the possible benefits of the Redux library. The focus was on the impacts of state managements on runtime performance and on efficiency of development.

Approach was to compare the differences of application with and without Redux library’s state management. The differences were compared by utilizing the applications’ source codes and graphs.

React uses state management where the state exists and is managed within a React library’s component. All other components that require to use this state, need to be contained inside of the component that manages and contains the state. Redux library introduces a state management of a different nature, in which the states are centralized for usage of all components in the application. When a state changes, all of components that are dependent on it will be updated. When a component is updated, components wrapped within it are updated also.

Redux library potentially increases applications runtime performance and increases efficiency of source code development. Increase in efficiency of source code development is derived from Redux library’s ability to connect components to centralized state without coupling to a specific state managing component. Runtime performance increase is made possible by Redux library’s ability to evade unnecessary component update calls.