时间戳

首页 > 解决方案 > 如何使用 react-redux 连接外部包中的组件

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

问题描述

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

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

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

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

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

在“Connect(ExternalComponent)”的上下文中找不到“store”。要么将根组件包装在 a 中<Provider>，要么将自定义的 React 上下文提供者传递给<Provider>连接选项中的 Connect(ExternalComponent)，并将相应的 React 上下文消费者传递给。

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

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

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

编辑 1

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

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

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

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

标签： reactjsreduxreact-redux

解决方案

所以，我在 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

感谢他们！

推荐阅读