如何用react redux从外部封装连接组件

Question

我的应用程序使用我自己的NPM包，对一些组件进行分组。

我在我的应用程序的主要索引中定义了这一点：

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)

应用程序组件声明路由器。每个路由要么使用我的NPM包中的内部组件，要么使用外部组件。

react redux的连接功能与内部组件配合良好。然而，当我尝试使用连接外部组件时，我遇到了一个错误：

在"Connect(ExternalComponent("的上下文中找不到"store"。将根组件封装在<Provider>中，或者传递自定义React<Provider>的上下文提供程序和相应的React上下文consumer到Connect(ExternalComponent(。

我可以理解这个问题：使用connect来满足内部需求，与任何包中的任何外部组件共享应用程序的状态真是一团糟。。。

但是，对于我的案子，有没有办法处理呢？

我不认为这是一个如此不同寻常的情况。当然，我试着用谷歌搜索它，但我是React/Redux世界的初学者，所以也许我还没有找到合适的单词。

编辑1

这就是我定义存储变量的方式。

import reducer from 'myNpmPackage/src/reducers';
import middleware from 'myNpmPackage/src/middleware';
const store = createStore(reducer, middleware);

正如您所看到的，减速器和中间件是我的NPM包的一部分。

编辑2

这是我的外部组件：

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
interface IExternalComponentProps {}
interface IExternalComponentState {}
class ExternalComponent extends PureComponent<IExternalComponentProps, IExternalComponentState>{
public render() {
return (
<div className="ExternalComponent">
External !
</div>
);
}
}
function mapStateToProps ({ test }: any) {
return {
test
}
}
export default connect(mapStateToProps)(ExternalComponent);

这是我的应用程序组件声明路由器：

import React, { Component } from 'react';
import { connect } from 'react-redux'
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import ExternalComponent from 'myNpmPackage/src/components/external-component/ExternalComponent.js';
// import InternalComponent from './components/internal-component/InternalComponent';
interface IAppProps {}
interface IAppState {}
class App extends React.Component<IAppProps, IAppState> {
public render() {
return (
<div className="App">
<div className="component-container">
<Router>
<div>
<Route exact path='/' component={ExternalComponent} />
</div>
</Router>
</div>
</div>
);
}
}
export default connect()(App);

如您所见，ExternalComponent是在TypeScript编译后通过JS格式使用的。

Answer 1

因此，我在CRA的Github上发布了一个问题：https://github.com/facebook/create-react-app/issues/6027

一个团队也遇到了同样的问题，他们找到了解决方案。为了记录在案，我在这里报告：

更改webpack.config.js中的resolve.modules这个：

模块：['node_modules'].conat(/*…*/(，到此：

模块：[path.resolve('node_modules'(，'node_models'].concat(/*。。。*/)，

此外，他们做了公关，你可以在这里找到：https://github.com/facebook/create-react-app/pull/6207

感谢他们！