Question

我的应用使用我自己的NPM软件包，将一些组件分组。

我在我的应用程序的主要index.ts中定义了它：

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

App组件声明路由器。每个路由都可以使用我的NPM软件包中的内部组件或外部组件。

react-redux的连接功能与内部组件配合良好。但是，尝试将connect与外部组件一起使用时出现错误：

在“ Connect（ExternalComponent）”的上下文中找不到“ store”。将根组件包装在<Provider>中，或传递自定义React <Provider>的上下文提供者和相应的React上下文消费者在连接选项中连接到Connect（ExternalComponent）。

我可以理解这个问题：使用内部连接使用connect与任何软件包中的任何外部组件共享应用程序的状态是多么混乱...

但是，有没有一种方法可以解决我的情况？

我不认为这是一个不寻常的情况。当然，我尝试使用Google进行搜索，但是我是React / Redux领域的初学者，所以也许我找不到合适的词。

编辑1

这就是我定义商店变量的方式。

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

如您所见，Reducer和中间件是我的NPM软件包的一部分。

编辑2

这是我的ExternalComponent：

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);

这是我的宣布路由器的App组件：

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);

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

Answer 1

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

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

从以下位置更改webpack.config.js中的resolve.modules   这个：

模块：['node_modules']。concat（/ * ... * /），为此：

模块：[path.resolve（'node_modules'），'node_modules']。concat（/ * ...   * /），

此外，他们进行了PR，您可以在这里找到它： https://github.com/facebook/create-react-app/pull/6207

感谢他们！

如何使用React-Redux连接外部包装中的组件

1 个答案: