Ako sa pripojiť React k Reduxu - schematický sprievodca

Tento príspevok je zameraný na ľudí, ktorí už poznajú React a Redux. Pomôže im to lepšie pochopiť, ako veci fungujú pod kapotou. Keď som sa prvýkrát dostal do vesmíru React? Pred asi 3 rokmi som veľmi ťažko chápal, ako Reduxove m apStateToProps a m apDispatchToProps fungujú a sú k dispozícii pre komponent React. Tu je schematický sprievodca, ktorý pomáha lepšie pochopiť, ako Reduxovo c onnect pracuje s Reactom.

Povedzme, že máme Searchkomponent.

A klasický obchod Redux.

Naplňme obchod Redux Actiondispečermi a Reducerštátom.

Reduktor defaultStatevyzerá takto. actionParameter vnútri Reducerfunkcie pochádza z odoslanéhoAction.

Spojme komponent React search s obchodom Redux. Knižnica React-Redux má oficiálne väzby React pre Redux.

Poskytuje connectfunkciu na pripojenie komponentu k obchodu.

mapDispatchToPropsznamená mapovať funkciu akcie dispatchna reagujúce komponenty this.props.

To isté platí pre mapStateToPropssituácie, keď je stav reduktora mapovaný na stav komponentu React this.props.

  1. Pripojte React k Reduxu.
  2. Spoločnosti mapStateToPropsa sa mapDispatchToPropszaoberajú obchodom Redux statea dispatch, resp.
  3. Reduktory statea Akcie dispatchsú dostupné prostredníctvom this.propskomponenty React.

Poďme si zhrnúť celý pracovný postup React to Redux connect kliknutím na tlačidlo z komponentu React search.

  1. Kliknite na submittlačidlo na komponente Reagovať hľadaním
  2. clickFunkcia odošle akciu. Funkcia Action dispatchje pripojená k vyhľadávaciemu komponentu prostredníctvom mapDispatchToPropsa je k dispozíciithis.props
  3. (mimo rozsahu tohto príspevku) Odoslaná akcia je zodpovedná za fetchúdaje a za odoslanie inej akcie za účelom aktualizácie stavu Reduceru
  4. Stav Reduceru sa aktualizuje o nové vyhľadávacie údaje dostupné od kroku 3.
  5. Stav zariadenia Reducer je už this.propsv komponente vyhľadávania pripojený prostredníctvommapStateToProps
  6. this.props má najnovšie údaje o vyhľadávaní a zobrazenie sa znova vykreslí, aby sa zobrazili aktualizované výsledky hľadania