connect

connect to tzw. High Order Component. Stanowi on drugą część mechanizmu Context - jest to konsument, który komunikuje się z "najbliższym" Providerem, który znajdzie podczas przechodzenia "w górę" drzewa JSX. Odbiera on dane (obiekt store) z kontekstu React i udostępnia komponentowi który wzbogaca.

import { connect } from "react-redux";

const App = props => (
  <div>
    <button onClick={() => {}}>Kliknięto 0 razy</button>
  </div>
);

const ConnectedApp = connect()(App);

Jeżeli w naszej aplikacji wykorzystamy teraz <ConnectedComponent /> zobaczymy, że wyrenderuje się on poprawnie. Jeżeli podejrzymy jakie props otrzymał (np. używając React Developer Tools lub chociażby dodając console.log(props) do komponentu) zobaczymy nowy prop - dispatch.

W ten sposób nasz komponent został "spięty" z Reduxem i może teraz emitować zdarzenia:

const App = props => (
  <div>
    <button
      onClick={() => {
        props.dispatch({ type: "CLICK" });
      }}
    >
      Kliknięto 0 razy
    </button>
  </div>
);

Jak widać, Redux nie przekazuje nam domyślnie danych jakie przechowuje w stanie. Jest to zabieg celowy mający na celu zapobieganie zarówno zbędnemu re-renderowaniu się komponentu jak i "zaśmiecanie" go zbędnymi informacjami.

connect() przyjmuje 4 parametry, pierwsze dwa omówimy w kolejnych rozdziałach.