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）该方法采用一个React组件类，而不是一个已经实例化的react元素，并且 b）即使这样，它仍会创建一个组件类，该组件类在实例化/安装后将检查商店的上下文，并且这会在创建上下文的提供者之上（在DOM层次结构方面）以及在挂载之前发生并有机会创建该上下文。

您反对使用<Provider/>的原因是什么？您是否正在尝试过早优化，因为您认为在应用程序的根目录中包含提供程序会对性能产生影响？如果是这样，我认为您可能会发现加入它并没有明显的影响，或者如果您正在体验中，我建议问题可能出在减速器的安装上，而不仅仅是使用<Provider/>

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

TL; DR：听起来像XY problem

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

1 个答案: