Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

157
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda