Provider
Mechanizm Context React zakłada istnienie 2 elementów w strukturze JSX: Provider-a, który udostępnia i przetwarza dane, oraz Consumer-a, który wykorzystuje dane i przekazuje nowe dane do przetworzenia.
Pakiet react-redux
udostępnia oba te elementy jako nazwane eksporty:
import { Provider } from "react-redux";
Komponent Provider
jest niczym innym jak providerem Reactowego API i w celu poprawnego działania powinien "owijać" on całą gałąź JSX naszej aplikacji, w której chcemy używać Reduxa, najczęściej oznacza to, że owija on całą aplikację:
import { Provider } from "react-redux";
// nasz plik, eksportujący store będący wynikiem wywołania `createStore`
import { store } from "./redux/store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
Jeżeli pominiemy ten krok, żaden z elementów, próbujących komunikować się z Reduxem nie będzie działać, a w konsoli zobaczymy błąd informujący o tym, że komponent nie jest w stanie znaleźć obiektu store
w kontekście.
W starszych wersjach react-redux (wersja < 6) możliwe było dodatkowo zdefiniowanie nazwy props, pod którym udostępniany będzie store, jednak nie jest to już wspierane (ani konieczne) w nowszych wersjach.