在“连接”的上下文中找不到“商店”

Question

我有一个应用程序可以导入我创建的 js-common 库。这个库导出了几个组件。当我尝试在我的应用中导入其中一个时，我得到：

“在“Connect(ListComponent)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给 Connect(ListComponent) 中的 Connect(ListComponent)选项。”

如果我在我的应用程序中移动这个组件（文件），它就可以工作。所以问题是当我从库中导出时。 在我的库中，我使用 babel 来转换每个文件。

更新

工作

import ListComponent from "./ListComponent";

class App extends Component {
  render() {
    return (
      </ListComponent>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

不工作

import ListComponent from "js-common";

class App extends Component {
  render() {
    return (
      </ListComponent>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

据我所知，这里的问题是您使用 react-redux 进行状态管理，这需要您使用 react-redux 附带的 Provider 组件包装您的根组件。它可以在您的应用中使用，因为您可能已经在该应用中提供了商店，但是当您将其导出时，无论您将其导入到哪个位置，您都没有商店。

如果您正在尝试编写要导出的库，那么最好不要使用 redux...或者，至少，您需要为您打算发布的顶级组件提供一个 Provider。 Provider 是这样使用的。

    <Provider store={store}>
        <Component />
    </Provider>

store 是你正在使用的 redux 商店