de Princiya

Cum să conectați React la Redux – un ghid diagramatic

Această postare se adresează persoanelor care cunosc deja React și Redux. Acest lucru îi va ajuta să înțeleagă mai bine cum funcționează lucrurile sub capotă.

Când am intrat pentru prima oară în universul React?, Acum ~ 3 ani, mi-a fost foarte greu să înțeleg cum este ReduxapStateToProps si mapDispatchToProps a funcționat și au fost disponibile pentru componenta React. Iată un ghid schematic pentru a înțelege mai bine modul în care Redux connect funcționează cu React.

Să presupunem că avem un Search componentă.

Și un magazin clasic Redux.

Să populăm magazinul Redux cu Action dispecerii și Reducer stat.

Reducătorul defaultState arata asa. action parametru din interiorul Reducer funcția provine de la expediatAction.

Să conectăm componenta de căutare React cu magazinul Redux. React-Redux biblioteca are legături oficiale React pentru Redux.

Acesta oferă connect funcția de conectare a componentei la magazin.

mapDispatchToProps înseamnă harta Acțiunii dispatch funcția pentru a reacționa componentelor this.props .

Același lucru este valabil și pentru mapStateToProps , unde starea Reductorului este mapată cu cea a React this.props .

1. Conectați React la Redux.
2. mapStateToProps și mapDispatchToProps se ocupă cu magazinul Redux state și dispatch, respectiv.
3. Reductor state și a acțiunii dispatch sunt disponibile prin this.props la componenta React.

Permiteți-ne să rezumăm întregul flux de lucru React to Redux connect printr-un clic de buton din componenta de căutare React.

1. Apasă pe submit de pe componenta React search
2. click funcția expediază o acțiune. Actiunea dispatch funcția este conectată la componenta de căutare prin mapDispatchToProps și este pus la dispoziția this.props
3. (în afara scopului pentru acest post) Acțiunea expediată este responsabilă față de fetch date și trimiteți o altă acțiune pentru a actualiza starea Reductorului
4. Starea Reducer se actualizează singură cu noile date de căutare disponibile de la Pasul 3.
5. Starea Reducer este deja conectată la this.props în componenta de căutare via mapStateToProps
6. this.props are cele mai recente date de căutare și vizualizarea se redistribuie acum pentru a afișa rezultatele de căutare actualizate