Estoy tratando de implementar un Redux en una aplicación React simple que usa la última versión (React 18). Aquí está mi código en index.js hasta ahora:
import React from 'react'; import ReactDOM from 'react-dom/client'; import { store, App } from './App'; import { createStore } from 'redux' export const renderApp = () => { ReactDOM.createRoot(document.getElementById('root')).render(<App />); } renderApp() store.subscribe(renderApp)Sin embargo, recibo una advertencia en la consola que dice:
"Está llamando a ReactDOMClient.createRoot() en un contenedor que ya se ha pasado a createRoot() antes. En su lugar, llame a root.render() en la raíz existente si desea actualizarla"
¿Qué se supone que significa y cómo debería cambiar mi código en index.js?
La implementación más básica sería algo como lo siguiente, que crea una raíz única, se representa contra ella y luego pasa una devolución de llamada que se cierra sobre esa raíz para futuras llamadas de suscripción.
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); store.subscribe(() => root.render(<App />));