reactjs - 如何在一个没有 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)".我读到上下文用于使用提供程序将 Prop 传递到树上。

我是 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) 该方法采用一个 React 组件类，而不是一个已经实例化的 React 元素，并且b) 即使如此，它也会创建一个组件类，在实例化/安装时检查存储的上下文，并且这种情况发生在将创建上下文的提供者之上(就 DOM 层次结构而言)以及安装之前并有机会创造这样的环境。

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

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

TL;DR:听起来像 XY problem