I am currently working on a React component (being quite new to React) that consists of two Fluent UI elements: A CommandBar (which holds actions such as “Add new folder”, “Delete folder”, “Upload file”…) and a DetailsList (which shows the directories and allows you to navigate by clicking on items)

The idea is to build a File Explorer that allows you to check directory tree, create new folders, upload files.

Firstly, I put the two into a single component, but as there were lots of actions, the state, and the file itself grew quite significantly. What I could move to another file I did, however there was still lots of code left (almost 700 lines) and I was soon getting lost in my own code.

So the state would look something as follows:

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

There were over 15 properties that were hard to track. So I decided to “lift the state up”, and split the components into two separate components that update state at the parent. This allowed to significantly improve the readability, but I stumbled upon a conceptual issue, which more senior developers would probably be able to solve.

The new state and props would look as follows:

interface DetailsListComponentState {
  columns: IColumn[],
  currentDirectory: ""
}

// CommandBarComponent state
interface CommandBarComponentState {
  shouldAllowToUpload: false,
  shouldAllowToDelete: true
}

// CommandBarComponent props
interface CommandBarComponentProps {
  onNewFileCreation(name: string): void,
  onFileUpload(): void
  ...
}

There are some dependencies, however, between the bar and my DetailsList as when I upload I would like to upload the file to the directory that I currently am viewing.

This would mean that I would need to lift the "directory" property to the Parent component, and would need to provide two functionalities:

1. Provide the onDirectoryChange prop to ensure that upon navigation within the DetailsListComponent, I have the information about the directory.
2. Keep the “directory” in Parent component, and force re-render when state "directory" property changes, which is also passed as props to the DetailsListCompoent.

Ideally, I would love to keep the directory knowledge only within the DetailsListComponent, and allow implementation of onFileUpload within Parent component to be able to access the directory information from the child.

To me, this looks not convenient as the two components are not "tightly" coupled. How would something like this be usually solved: Shared Store (Redux) or is there a way of making it work without the need of Redux.