Provider 和 connect 是如何工作的？

Question

1-Provider

为什么我们需要将所有组件都包装在 Provider 中？

2-connect:

connect 如何将 redux store 作为props 传递给组件？

3- 我们可以建立自己的Provider 和connect 吗？

下面是一个完整工作的简单 React Redux 示例，它仅显示来自 redux 存储的名称并使用 React Redux connect 和 Provider，那么 ConnectedComponent 如何可以简单地访问 this.props.name ？

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 (
        <h2>{this.props.name}</h2>
    );
  }
}
function mapStateToProps(state) {
  return {
    name: state.name
  };
}
ConnectedComp = connect(mapStateToProps)(ConnectedComp);



class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedComp />
      </Provider>
    );
  }
}

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

这里有一个完整的示例https://codesandbox.io/s/lpvnxro7n7

Answer 1

为了能够理解 Provider 和 connect 的工作原理，我们需要理解 React 中的两个概念

1- 上下文 API：

上下文是一种通过组件树传递数据的方式，无需在每一层手动向下传递道具，您可以了解更多关于context here

2- 高阶组件 (HOC)：

高阶组件是一个函数，它接受一个组件并返回一个新组件，但在返回新组件之前你可以传递额外的自定义 props 然后返回它，你可以了解更多关于HOC here

---

3- 构建我们自己的 Provider 和 connect

既然我们了解了上下文和高阶组件，我们将使用它们在问题中创建相同的完整工作示例，但使用我们自己构建的 myProvider 和 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;
  }
}

---

同样的简单示例使用我们自己的MyProvider 和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"));

---

你可以在这里测试上面的实现https://codesandbox.io/s/727pl0mqoq

---

这个例子简单说明了如何使用 React Context 和 HOC 构建 react-redux Provider 和 connect。

这让我们更好地理解我们为什么使用Provider、connect 和mapStateToProps