Sådan tilsluttes Reager til Redux - en skematisk guide
apStateToProps
og m apDispatchToProps
fungerede og var tilgængelige for React-komponenten. Her er en diagrammatisk guide til bedre forståelse af, hvordan Redux's c onnect
fungerer med React.
Lad os sige, at vi har en Search
komponent.

Og en klassisk Redux-butik.

Lad os udfylde Redux-butikken med Action
afsendere og Reducer
staten.


Reducerens defaultState
ser sådan ud. Den action
parameter inde i Reducer
funktionen kommer fra det afsendtAction.

Lad os forbinde React-søgekomponenten med Redux-butikken. React-Redux-biblioteket har officielle React-bindinger til Redux.
Det giver connect
funktionen til at forbinde komponenten til butikken.
mapDispatchToProps
betyder kortlægge Handlingens dispatch
funktion til at reagere komponentens this.props
.
Det samme gælder for mapStateToProps
, hvor Reducer-tilstanden kortlægges til React-komponentens this.props
.

- Tilslut React til Redux.
- Den
mapStateToProps
ogmapDispatchToProps
beskæftiger sig med henholdsvis Redux-butikkensstate
ogdispatch
. - Reducer
state
og handlingdispatch
er tilgængelige viathis.props
til React-komponenten.
Lad os opsummere hele React to Redux connect workflow via et knap-klik fra React-søgekomponenten.

- Klik på
submit
knappen på reager søgekomponenten - Den
click
funktion afsender en aktion. Handlingsfunktionendispatch
er forbundet til søgekomponenten viamapDispatchToProps
og stilles til rådighed forthis.props
- (uden for dette indlæg) Den afsendte handling er ansvarlig for
fetch
data og afsender en anden handling for at opdatere Reducer-tilstanden - Reducer-tilstanden opdaterer sig selv med de nye søgedata, der er tilgængelige fra trin 3.
- Reducer-tilstanden er allerede forbundet til
this.props
i søgekomponenten viamapStateToProps
this.props
har de nyeste søgedata, og visningen gengives nu igen for at vise de opdaterede søgeresultater