First, remove the store.subscribe call from src/index.jsx. We no longer need this as connect will take care of subscribing to changes to the state. This also means we no longer need to wrap our ReactDOM.render call inside a function.

Next, since we will be calling connect within each component, there’s no need to pass the store and the state properties as props. Therefore, in our <Route> components, switch back to using the component prop instead of render.

Most importantly, wrap our entire application with the <Provider> component, passing the store as its only prop:

import { Provider } from 'react-redux';
 ReactDOM.render((
   <Provider store={store}>
     <BrowserRouter>
       <Switch>
       <Route exact path="/register" component={RegistrationForm} />
       <Route exact path="/login" component={LoginForm} />
       </Switch>
     </BrowserRouter>
   </Provider>
 ), document.getElementById('renderTarget'));

Now, the store is available to all components within the app. To access the store’s state and to dispatch actions to the store, we’d need to use connect.