:
Last modified: Feb 26, 2024

Frontend

Jest

Jest logo “Jest is a delightful JavaScript Testing Framework with a focus on simplicity.” Jest testing framework is used for front-end testing. You can read more about how to test with Jest here. Links https://jestjs.io https://github.com/facebook/jest »

Kodearkitektur

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. »

React

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. »

Redux

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. »