如何在一个没有 Provider 但有 connect 的组件中使用 Redux 存储，因为不需要子组件？

Question

我想使用connect它的性能优化和易用性mapStateToProps。我认为我不需要将存储从<Provider>包装组件传递到组件到任何子组件，因为我没有任何需要存储的子组件；我希望商店位于一个组件中，即“Header.jsx”。主要是，除了默认的 React 和 Material-UI 之外，我没有任何其他我想要使用商店的组件。

我该怎么办呢？我尝试传递商店defaultProps并使用它export default connect(mapStateToProps)(Header)，但它一直说Uncaught Invariant Violation: Could not find "store" in the context of "Connect(Header)".我读到上下文是用于使用提供者将道具传递到树上的。

我是 Redux 和 React 的新手，所以如果我的做法完全错误，请告诉我。

如果connect没有提供者就无法使用，我将如何从内部包装我的类？

例子：

class componentName extends Component {
    constructor(props) {
      super(props);
    };
  render() {
      return (
          <h1>Hello World!</h1>
      );
    }
  }

export default connect(mapStateToProps)(<Provider store={storeName}>componentName</Provider>); // Maybe something like this?

Answer 1

connect()我认为如果没有<Provider/>- 这取决于所遵循的模式，你根本无法使用。如果要使用connect()，连接的组件必须是提供者的后代。<Provider/>您建议在调用中包含的示例connect()将不起作用，如下所示：

a) 该方法采用一个反应组件类，而不是一个已经实例化的反应元素，并且 b) 即使如此，它也会创建一个组件类，该组件类在实例化/安装时检查存储的上下文，这在上面都发生了（在根据 DOM 层次结构的术语），提供者将创建上下文，并且在安装上下文之前，有机会创建该上下文。

您反对使用 的原因是什么<Provider/>？您是否试图过早优化，因为您认为将提供程序包含在应用程序的根目录中会对性能产生一些影响？如果是这样，我认为您可能会发现包含它并没有明显的影响，或者如果您遇到这种影响，我建议问题可能出在您的减速器的设置中，而不仅仅是在使用<Provider/>.

如果您绝对决定不使用减速器，您可以获取您的Store对象（从您调用的任何地方返回createStore()），并且在componentDidMount()需要它的一个组件中，您可以store.subscribe()监听状态更改，然后用于store.getState()获取这些更改并将它们加载到状态中。但最终，您会发现您只是重新实现<Provider/>，尽管可能没有上下文部分。

TL;DR：听起来像是XY 问题