reactjs - 如何在没有提供者但有连接的组件中使用 Redux 存储，因为不需要子级？

问题描述

我想使用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?

标签： reactjsreduxreact-redux

解决方案

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

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

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

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

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

reactjs - 如何在没有提供者但有连接的组件中使用 Redux 存储，因为不需要子级？

问题描述

解决方案

推荐阅读