Quiero encapsular un componente npm React y quiero usar Redux para administrar el estado dentro de este componente React.
Cuando otro proyecto de React importe mi componente, ¿la instancia de redux de este proyecto de React tendrá un conflicto con mi componente de React?
Aquí está el ejemplo: El componente se verá así:
// 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>; } Luego, creo otro proyecto React e importo el componente FileExplorer desde npm
índice.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 );Aplicación.jsx
import FileExplorer from 'file-explorer'; export default function App() { return ( <div className="App"> <FileExplorer source={'https://example.com/data/v1/files'} /> </div> ); }Un par de pensamientos aquí.
La primera es sí, esto causaría absolutamente un conflicto si los componentes anidados dentro de <FileExplorer> también necesitan acceder a la tienda Redux de toda la aplicación, porque de manera predeterminada, todos los componentes React conectados a Redux acceden a la misma instancia de la tienda a través del contexto React.
Es técnicamente posible pasar un contexto alternativo a <Provider> y crear versiones personalizadas de useSelector/useDispatch que lean la tienda desde ese contexto:
https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context
aunque parece que en realidad no documentamos la API para crear las versiones personalizadas de contexto del selector hooks atm.
React-Redux debería exportar las funciones createSelectorHook y createDispatchHooks , que puede ver en uso aquí:
https://github.com/reduxjs/react-redux/blob/v7.2.6/src/hooks/useSelector.js#L166
Debe usarse como:
const useCustomContextSelector = createSelectorHook(MyCustomContext);
Dicho todo esto: todavía me inclinaría por rastrear el estado en un useReducer como predeterminado en lugar de una tienda Redux separada real.
Tenga en cuenta que puede usar createSlice de RTK para crear un reductor específicamente para usar en un gancho useReducer : las funciones del reductor son solo funciones y funcionan bien en cualquier lugar.