Sådan tilsluttes Reager til Redux - en skematisk guide

Dette indlæg er rettet mod folk, der allerede kender React og Redux. Dette vil hjælpe dem med bedre at forstå, hvordan ting fungerer under emhætten. Da jeg først kom ind i React-universet? ~ ~ For 3 år siden, havde jeg svært ved at forstå, hvordan Reduxs m 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 Searchkomponent.

Og en klassisk Redux-butik.

Lad os udfylde Redux-butikken med Actionafsendere og Reducerstaten.

Reducerens defaultStateser sådan ud. Den actionparameter inde i Reducerfunktionen kommer fra det afsendtAction.

Lad os forbinde React-søgekomponenten med Redux-butikken. React-Redux-biblioteket har officielle React-bindinger til Redux.

Det giver connectfunktionen til at forbinde komponenten til butikken.

mapDispatchToPropsbetyder kortlægge Handlingens dispatchfunktion til at reagere komponentens this.props.

Det samme gælder for mapStateToProps, hvor Reducer-tilstanden kortlægges til React-komponentens this.props.

1. Tilslut React til Redux.
2. Den mapStateToPropsog mapDispatchToPropsbeskæftiger sig med henholdsvis Redux-butikkens stateog dispatch.
3. Reducer stateog handling dispatcher tilgængelige via this.propstil React-komponenten.

Lad os opsummere hele React to Redux connect workflow via et knap-klik fra React-søgekomponenten.

1. Klik på submitknappen på reager søgekomponenten
2. Den clickfunktion afsender en aktion. Handlingsfunktionen dispatcher forbundet til søgekomponenten via mapDispatchToPropsog stilles til rådighed forthis.props
3. (uden for dette indlæg) Den afsendte handling er ansvarlig for fetchdata og afsender en anden handling for at opdatere Reducer-tilstanden
4. Reducer-tilstanden opdaterer sig selv med de nye søgedata, der er tilgængelige fra trin 3.
5. Reducer-tilstanden er allerede forbundet til this.propsi søgekomponenten viamapStateToProps
6. this.props har de nyeste søgedata, og visningen gengives nu igen for at vise de opdaterede søgeresultater