To be able to understand how Provider and connect work we need to understand 2 concepts in React

1- Context api:

Context is a way to pass data through the component tree without having to pass the props down manually at every level, you can learn more about context here

2- Higher Order Component (HOC):

A higher-order component is a function that takes a component and returns a new component but before returning the new component you can pass extra custom props and then return it, you can learn more about HOC here

3- Build our own Provider and connect

Now that we understand both Context and Higher Order Component, we will use them to create the same fully working example in the question but using our own built myProvider and myConnect

MyProvider

//This is how we utilize React Context and create MyProvider component that will pass store to all its child components automatically

//This is also known by Provider pattern

class MyProvider extends Component {

  //By adding the getChildContext function and childContextTypes, React passes the information down automatically to any component in the subtree

  getChildContext() {

    const { store } = this.props

    return { store }

  }



  render() {

    return this.props.children;

  }

}



MyProvider.childContextTypes = {

  store: PropTypes.object.isRequired,

}

myConnect

//This is the Higher Order Component

function myConnect(mapStateToPropsFunc) {

  return function (WrappedComp) {

    var myHOC = class HOC extends Component {

      render() {

        //Now we access redux store using react context api as it will be passed by MyProvider automatically to all child components

        var myStore = this.context.store.getState();

        //mapStateToPropsFunc is just used to structure the props required by the component so we pass to mapStateToPropsFunc the whole store and then it returns a mapped object with required props thats why it is well known by mapStateToProps

        var storeToBePassed = mapStateToPropsFunc(myStore);

        return (

          //We pass the result from executing mapStateToPropsFunc to the wrapped component and this is how the components get passed props from redux store

          <WrappedComp {...storeToBePassed} />

        )

      }

    }



    //We need to define contextTypes otherwise context will be empty

    myHOC.contextTypes = {

      store: PropTypes.object

    };



    //return new component that has access to redux store as props mapped using mapStateToProps function

    return myHOC;

  }

}

The same simple example using our own MyProvider and myConnect

//Note that we removed react-redux library

import React, { Component, Children } from react;

import { PropTypes } from prop-types;

import { render } from react-dom;

import { createStore } from redux;



var defaultState = {

  name: Amr

};



function rootReducer(state = defaultState, action) {

  return state;

}



var store = createStore(rootReducer);



class App extends Component {

  render() {

    //Here we use our own built myProvider and pass store

    return (

      <MyProvider store={store}>

        <ConnectedComp />

      </MyProvider>

    );

  }

}



class ConnectedComp extends Component {

  render() {

    return (

      <h2>{this.props.name}</h2>

    );

  }

}



//mapStateToProps is a normal function that get store as parameter and return the required props by that component, btw this function can have any name

function mapStateToProps(state) {

  return {

    name: state.name

  };

}



//Here we use our own built myConnect

ConnectedComp = myConnect(mapStateToProps)(ConnectedComp);



render(<App />, document.getElementById(root));

You can test the above implementation here https://codesandbox.io/s/727pl0mqoq

This example is a simple illustration of how react-redux Provider and connect can be built by utilizing both React Context and HOC.

This give us a better understanding of why we use Provider, connect and mapStateToProps