Best way to allow other components to change table's focused row?

I have displayProjectTable that gets state from reducer projectData and populates itself.

Currently displayProjectTable has a local state that stores focusedRowID. My problem is that I want other components to have the ability to modify the focusedRowID and it's content.

Some examples:
-A component tells displayProjectTable to add 1 to focusedRowID (ie. focus on the next row)
-A component tells displayProjectTable to set value of row at focusedRowID to "test". Because displayProjectTable gets its state from projectData, that reducer's state will have to be changed at the focusedRowID index.

A possible solution is to store focusedRowID inside of the projectData.js reducer. However, this seems like a bad solution to me. The projectData reducer is responsible for fetching, storing, and saving projectData. Would it really make sense to store a focusedRowID when projectData shouldn't even know what a row is?

Comments

[Sabin Pandelovitch]

Some solutions that I see to your problem:

• Keep it in the same reducer
• Create another reducer
• Use context, create a context provider and update it with the context API

[wyattGTL]

The second option is interesting to me. You mean I could make a reducer specific to the table such as projectTableReducerwhich would store the focusedRowID?

I get that I could change the focusedRowID from other components using the actions for projectTableReducer, but I don't understand how I could modify a row in projectData reducer from projectTableReducer.

[Sabin Pandelovitch]

Personally I would go with the 3rd option and use context.

I use the store to store data in it, not the app state, but you can do as you like, both cases give you the same options.

You can create an appState reducer and store variables there, you can change the through actions and reducers and get them through selectors. Or you can create an app context provider and consumers.

You can find more on context here