Will Redux inside a React component from npm conflict with the container's Redux?

user_10942982 0
Viewed 147

I want to encapsulate a npm React component, and I want to use Redux to manage state inside this React component.
When another React project imports my component, will this React project's redux instance have conflict with my React component?

Here is the example: The component will look like:

// File Explorer Component, will be build into a npm package
import React from "react";
import { Provider } from "react-redux";
import { store } from "./store";
function FileExplorer({source}) {
  <Provider store={store}>
     {/* there will be complicated business logic inside */}
  </Provider>;
}

Then, I create another React project, and 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 store is a different one
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>
  );
}
npm redux reactjs javascript
1 Answers

A couple thoughts here.

The first is yes, this would absolutely cause a clash if the components nested inside of <FileExplorer> also need to access the app-wide Redux store, because by default all Redux-connected React components access the same store instance via React context.

It is technically possible to pass an alternate context to <Provider> and create customized versions of useSelector/useDispatch that read the store from that context:

https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context

although it looks like we don't actually document the API for creating the context-customized versions of the selector hooks atm.

React-Redux should be exporting createSelectorHook and createDispatchHooks functions, which you can see in use here:

https://github.com/reduxjs/react-redux/blob/v7.2.6/src/hooks/useSelector.js#L166

Should be used as:

const useCustomContextSelector = createSelectorHook(MyCustomContext);

All that said: I'd still lean towards tracking the state in a useReducer hook as the default rather than an actual separate Redux store.

Note that you can use RTK's createSlice to create a reducer specifically for use in a useReducer hook - reducer functions are just functions and work fine in either place.

user_629370
Related