I am looking to bundle a React component with npm and incorporate Redux to handle state within the component.
If another React project imports my component, will it cause conflicts with the Redux instance of that project?
For example: The component code will be:
// File Explorer Component, packaged as an npm module
import React from "react";
import { Provider } from "react-redux";
import { store } from "./store";
function FileExplorer({source}) {
<Provider store={store}>
{/* there will be complex business logic inside */}
</Provider>;
}
Now, in a separate React project, I import the FileExplorer component from npm
index.jsx
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store"; // this is a different store instance
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>,
rootElement
);
App.jsx
import FileExplorer from 'file-explorer';
export default function App() {
return (
<div className="App">
<FileExplorer source={'https://example.com/data/v1/files'} />
</div>
);
}