title: How does Provider and connect work in react?
body: <h3>1- <code>Provider</code></h3>
  
  <p>Why do we need to wrap all our components inside <code>Provider</code> ?</p>
  
  <h3>2- <code>connect</code>:</h3>
  
  <p>How is <code>connect</code> passing redux store as <code>props</code> to components ?</p>
  
  <h3>3- Can we build our own <code>Provider</code> and <code>connect</code> ?</h3>
  
  <p>Below is a fully working simple React Redux example that just displays a name from the redux store and uses React Redux <code>connect</code> and <code>Provider</code>, so how <code>ConnectedComponent</code> can simply access <code>this.props.name</code> ?</p>
  
  <pre><code>import React, { Component } from "react";
  import { render } from "react-dom";
  import { createStore } from "redux";
  import { Provider, connect } from "react-redux";
  
  var defaultState = {
    name: "Amr"
  };
  
  function rootReducer(state = defaultState, action) {
    return state;
  }
  
  var store = createStore(rootReducer);
  
  
  class ConnectedComp extends Component {
    render() {
      return (
          &lt;h2&gt;{this.props.name}&lt;/h2&gt;
      );
    }
  }
  function mapStateToProps(state) {
    return {
      name: state.name
    };
  }
  ConnectedComp = connect(mapStateToProps)(ConnectedComp);
  
  
  
  class App extends Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;ConnectedComp /&gt;
        &lt;/Provider&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>A fully working example here <a href="https://codesandbox.io/s/lpvnxro7n7" rel="noreferrer">https://codesandbox.io/s/lpvnxro7n7</a></p>