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-typescriptRedux 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
DEMOReact DevTools extension
Relevant stoff
- https://react-redux.js.org/
- https://redux-toolkit.js.org/
- https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
- https://blog.isquaredsoftware.com/2021/01/context-redux-differences/ !!!
- https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#summary
- https://dev.to/ruppysuppy/redux-vs-context-api-when-to-use-them-4k3p
- https://www.youtube.com/watch?v=jR4fagDcvrc&t=2s
- Sjekk ut: Thunk, useReducer, middleware
Takk for i dag! :)
Neste gang: Hooks: useReducer() / Repetisjon
9. Redux
By dawood11
9. Redux
9. Redux
