Actualmente estoy trabajando en un componente de React (siendo bastante nuevo en React) que consta de dos elementos de interfaz de usuario fluidos: una CommandBar (que contiene acciones como "Agregar nueva carpeta", "Eliminar carpeta", "Cargar archivo"...) y un DetailsList (que muestra los directorios y le permite navegar haciendo clic en los elementos)

La idea es crear un Explorador de archivos que le permita verificar el árbol de directorios, crear nuevas carpetas, cargar archivos.

En primer lugar, puse los dos en un solo componente, pero como había muchas acciones, el estado y el archivo en sí crecieron bastante. Lo que podía mover a otro archivo lo hice, sin embargo, todavía quedaba mucho código (casi 700 líneas) y pronto me estaba perdiendo en mi propio código.

Así que el estado se vería algo así:

 interface State { directory: string, columns: IColumn[] shouldAllowToUpload: false, shouldAllowToDelete: true ... }

Había más de 15 propiedades que eran difíciles de rastrear. Así que decidí "elevar el estado" y dividir los componentes en dos componentes separados que actualizan el estado en el padre. Esto permitió mejorar significativamente la legibilidad, pero me topé con un problema conceptual, que los desarrolladores más experimentados probablemente podrían resolver.

El nuevo estado y accesorios se verían de la siguiente manera:

 interface DetailsListComponentState { columns: IColumn[], currentDirectory: "" } // CommandBarComponent state interface CommandBarComponentState { shouldAllowToUpload: false, shouldAllowToDelete: true } // CommandBarComponent props interface CommandBarComponentProps { onNewFileCreation(name: string): void, onFileUpload(): void ... }

Sin embargo, existen algunas dependencias entre la barra y mi Lista de detalles, ya que cuando lo subo, me gustaría cargar el archivo en el directorio que estoy viendo actualmente.

Esto significaría que tendría que elevar la propiedad "directorio" al componente principal y tendría que proporcionar dos funcionalidades:

1. Proporcione la prop onDirectoryChange para garantizar que al navegar dentro de DetailsListComponent, tengo la información sobre el directorio.
2. Mantenga el "directorio" en el componente principal y fuerce la representación cuando cambie la propiedad del "directorio" de estado, que también se pasa como accesorios a DetailsListCompoent.

Idealmente, me encantaría mantener el conocimiento del directorio solo dentro de DetailsListComponent y permitir la implementación de onFileUpload dentro del componente principal para poder acceder a la información del directorio desde el elemento secundario.

Para mí, esto no parece conveniente ya que los dos componentes no están "estrechamente" acoplados. ¿Cómo se resolvería normalmente algo como esto: Shared Store (Redux) o hay alguna forma de hacerlo funcionar sin la necesidad de Redux?