在主机没有 redux 的情况下反应连接组件包答案

【问题标题】：React Connected Component package without host having redux在主机没有 redux 的情况下反应连接组件包
【发布时间】：2022-12-01 11:25:45
【问题描述】：

我是新手，我正在尝试创建一个连接组件 (redux) 供公司内部使用，但我不想强制主机应用程序使用 redux。我想避免像这样使用我的组件：

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

我想过使用诸如高阶组件和上下文之类的东西，但它只是没有点击。

甚至创建我自己的提供者也是可以接受的，比如：

<MyComponentProvider><MyComponent /></MyComponentProvider>

主机应用程序是否可以在没有 redux 作为依赖项的情况下使用 Redux 组件？

【问题讨论】：

你的问题我不清楚。你想达到什么目的？请提供更多详情
想象一下，我有一个组合框组件作为 NPM 包，在实现中使用了 redux。我可以在没有 redux 依赖项的应用程序中导入和使用该组合框组件吗？

标签： reactjs redux

【解决方案1】：

这应该是可能的。组件可以有自己的 redux store。保持它作为一个完整的黑盒子。

这是一个演示，考虑包目录是你的 npm 包，我们在 npm 包中安装 redux、react-redux 包，而不是你的主机或主项目。

package/combobox.tsx:

import * as React from 'react';
import { useSelector } from 'react-redux';

export const Combobox = () => {
  const state = useSelector((state) => state);
  console.log('state: ', state);
  return <div>combobox</div>;
};

我们可以将它包装在一个特殊的组件中，该组件在构造函数中初始化商店：

package/index.tsx:

import { Component } from 'react';
import * as React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { Combobox } from './combobox';

const reducer = (state = { counter: 1 }) => {
  return state;
};

export default class ComboboxConnected extends Component {
  store: ReturnType<typeof createStore>;
  constructor(props) {
    super(props);
    this.store = createStore(reducer);
  }

  render() {
    return (
      <Provider store={this.store}>
        <Combobox />
      </Provider>
    );
  }
}

现在，每个Combobox 组件实例都有自己的 redux 存储和状态。

消费端 App.tsx:

import * as React from 'react';
import Combobox from './package/index';
import './style.css';

export default function App() {
  return (
    <div>
      <Combobox />
    </div>
  );
}

见Isolating Redux Sub-Apps

stackblitz

【讨论】：