reactjs React Connected Component软件包,主机不具有redux

ohfgkhjo  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(94)

我是一个新的React者,我正在尝试创建一个连接组件(redux)供公司内部使用,但我不想强制主机应用使用redux。我想避免这样使用我的组件:

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

我想在使用像高阶组件和上下文,但它只是没有点击。
甚至创建自己的提供程序也是可以接受的,例如:

<MyComponentProvider><MyComponent /></MyComponentProvider>

宿主应用程序是否可以使用Redux组件而不将Redux作为依赖项?

nbysray5

nbysray51#

应该是可以的。组件可以有自己的redux存储。把它作为一个完整的黑盒子保存。
这里是一个演示,假设包目录是你的npm包,我们在npm包中安装reduxreact-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 在一个特殊的组件中,该组件在构造函数中初始化存储:
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

相关问题