React

Redux

Agenda

  • Arbeidskrav 2
    • ​Frist fredag 08. november 2024
    • Github
    • Wiseflow
      • En eller alle leverer, men få med alle navnene
  • Redux & Redux toolkit

Dekket

Skal dekke

Burde sjekkes ut

Ekstern for react

State management

Lokal state

VS

Global state

Parent

Child

GrandChild

GrandChild

Child

Lokal state

Lokal state

Parent

Child

GrandChild

GrandChild

Child

Global state

Provider

Consumer

Consumer

Consumer

Consumer

Redux

VS

Context

Context

  • Bra for lavfrekvente endringer
    • Darkmode/Lightmode
    • User logged in
  • Rendrer alle komponenter som bruker useContext(), når en endring av state skjer
  • Krever ikke mye kode
  • Ikke en state-manager
    • Sender data ned til komponenter
    • lagrer aldri data i en store
  • React

Redux

  • Bra for høyfrekvente endringer
    • Data fra API
  • react-redux pakken bruker context internt
  • Større mengde av applikasjon state som trengs flere steder i applikasjonen
  • Krever mye kode & struktur
  • State-manager

 

  • ikke bare for React

From the table, you must be able to comprehend where the popular opinion Redux is for large projects & Context API for small ones come from.

 

Both are excellent tools for their own specific niche, Redux is overkill just to pass data from parent to child & Context API truly shines in this case. When you have a lot of dynamic data Redux got your back!

Redux

Redux

  • State-manager
  • Ble mest populær blant mange alternativer
  • React redux
  • React redux toolkit
  • Inneholder masse kode
npm install @reduxjs/toolkit react-redux
# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

Redux bak kulissene

Store

  • Hvor data er lagret
  • Kan aksesseres fra hvor som helst
  • Redux store håndterer våre state, ikke komponenter
  • Actions trigger oppdateringer
  • Reducers bruker oppdateringene
  • Provider
    • Fordeler Redux Store til hele applikasjonen ("Provides")

Dispatch

  • Brukes til å trigge action

 

  • Basert på hvilken action som har blitt trigget, sørger dispatch for tilsvarende reducer

 

  • Hvis addUser action har blitt trigget, sørger dispatch for at addUser reducer blir kjørt

Action

  • Trigger en handling/oppdatering
  • Må ha en type som forklarer handlingen => action
  • Kan ta i mot data for å endre state => Payload

Reducer

  • Bruker oppdateringen ved å oppdatere state i store
  • Må bli trigget via en action med en typen som forklarer handlingen
  • Må returnere den nye eller nåværende state
  • Typisk brukt med en switch, men...

Redux bak kulissene

Redux bak kulissene

Redux toolkit

Slice

  • Pakker actions og reducers I en
  • Krever:
    • en unik name
    • initiell state
    • reducers
      • actions

Redux toolkit

DEMO

React DevTools extension

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Relevant stoff

Takk for i dag! :)

Neste gang: Hooks: useReducer() / Repetisjon