Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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>
  );
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!