Bruk av Redux Store i Containere og Components. Kort oppsummert (TL;DR) Send “ID” eller andre identifikatorer via Props til komponenten og la komponenten hente data fra Redux Store.
Utfordring (Why?) Hvis en del av Redux Store sendes som Props så vil komponenten re-rendres ved endringer av denne Prop/Store. Det er ønskelig at komponenter ikke rendrer unødvendig.
Re-rendring trigges av… Endring av Props. Endring av State som endrer Props. Kilder Redux best practices Common pitfalls Filtrering av Redux Store i mapStateToProps() ved help av Selector Kort oppsummert (TL;DR) Bruk Memoized Selector for å filtrere Redux Store til Props når Redux Store er stor. »
Material UI logo Material UI is used in Altinn Studio as the React UI library. Material UI was chosen because
It is based on the Google’s material design. It focuses exclusively on the React components Can use responsive components provided by the library Can override the style to customize the component to match the application requirements Can save time by using the components in the library instead of creating it from scratch (for example, the navigation drawers, application bar) It uses JSS as a styling solution that exposes a low-level API which helps in advanced overriding and theming mechanism React router is a third party routing library used in Altinn Studio to trigger navigation within the application. »
React logo Modulært rammeverk for å utvikle UI komponenter som kan gjenbrukes flere steder i løsningen. Hvert React komponent har en tilstand som gir den data i henhold til hvor i applikasjonen brukeren er og hvilke handlinger som foretas. Vedlikeholdt av Facebook, under MIT lisens. Slik React blir brukt Uten redux Ved bruk av higher order components kan tilstand sendes fra rot-komponenten nedover i komponent-hierarkiet. Rot-komponenten håndterer alt av state, og sender callbacks ned i komponentene, slik at det er mulig og legge til, fjerne og endre komponenter. »
Applikasjonstilstandshåndtering En felles tilstand for hele applikasjonen Tilstanden styres av Actions som håndteres av Reducere som igjen populerer tilstanden. En Action kan f.eks. være “FETCH_POSTNUMMER” Når en slik actions kjøres, så vil en Reducer ta imot og oppdatere tilstanden slik at det er i tilstanden at applikasjonen nå henter postnummer. Når er hentingen er fullført, vil man f.eks. sende en action “FETCH_POSTNUMMER_FULFILLED” som har postnummer-data med som parameter. Reducer håndterer denne handlingen og setter postnummer-data i applikasjonens tilstand. »
