如何使用 react-redux 连接外部包中的组件答案

【问题标题】：How to connect component from external package with react-redux如何使用 react-redux 连接外部包中的组件
【发布时间】：2019-05-09 01:48:56
【问题描述】：

我的应用使用我自己的 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 来满足内部需求，与任何包中的任何外部组件共享应用程序的状态真是一团糟……

但是，有没有办法处理我的情况？

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

编辑 1

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

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

如您所见，reducer 和中间件是我的 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);

这是我声明路由器的 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);

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

【问题讨论】：

请在此处添加您的商店代码。
是的，这是不典型的情况。你可以添加代码sn-p你如何用connect()包装组件？
并提供与<Route>集成的部分
我发现了问题：我正在通过 npm link 命令使用符号链接。没有它，很好。但是符号链接在开发过程中非常有用...... :(有人吗？
嗯，现在听起来完全不同的问题。我相信创造一个新的是有意义的。无论如何，您需要提供 webpack 配置，因为有与 to path resolving 相关的特殊配置选项并描述文件夹结构以及符号链接在哪里

标签： reactjs redux react-redux

【解决方案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

感谢他们！

【讨论】：