Our last piece of code is based on the standard App.js file that's produced by create-react-app; the App class is imported by index.js:

// Source file: src/App.counter.js

/* @flow */

import React, { Component, Fragment } from "react";
import { Provider } from "react-redux";

import { store } from "./counterApp/store";
import { ConnectedCounter, ConnectedClicksDisplay } from "./counterApp";

class App extends Component<{}> {
    render() {
        return (
            <Provider store={store}>
                <Fragment>
                    <ConnectedCounter />
                    <hr />
                    <ConnectedClicksDisplay />
                </Fragment>
            </Provider>
        );
    }
}

The key part here is the <Provider> component. This is a part of React's latest Context feature (see https://reactjs.org/docs/context.html for more on it), and it gives access to the store object to any of the following components; the connect() function (that we used in the previous section) uses it to provide props to those components, and to subscribe them to changes. By the way, we are using Fragment here, just because Provider expects a single element. In addition to this, <div> could have worked as well.

With everything together, let's see how this works!