Handling selection state between Redux and the Table

[genepaul]

I am struggling with trying to handle selection state between a Redux store and a reusable table based on react-table.

My use case is that I am trying to create a shareable table component for my organization that has a lot of the common behaviors encapsulated into the table. The problem is that people will be using my table component inside apps that need to be able to control/interrogate the selection state of the table. As an example, they might have a "Number of selected Items" component as a sibling to my data table component that needs to know the number of selected items, and has a button to clear the selected items. My organization typically uses Redux as a state management solution, and previous to this we would simply track selected ids in Redux and pass that state down to the components that needed it. The fact that react-table stores its selection state internally is making it difficult to provide a shareable component that can also work in such an environment.

I've tried several approaches to this problem:

1. Use useControlledState to update the selected rows in state based on passed in selectedRowIds. But this basically completely bypasses useRowSelect state update logic, so I can't use getToggle*SelectedProps helpers. This seems to be implied in several issues I've seen, such as Reducer in useRowSelect relies on external state #2171, but that issue also has several PRs pointing to it that make it seem like it should be fixed.
2. Pass isSelected in on data rows based on my selected items in my store. But I'm struggling here with how to update that when selection is changed in the table. If I override any of the props provided by getToggle*Props it causes inconsistent state. But then I don't know how to reconcile between my store state and the table state.

I know the root of this problem is that I'm holding state in more than one place, so I'm looking for guidance on what the "react-table" way to do this should be. Is it expected that you should never handle state outside of react-table components? The documentation seems to point to ways to control the state, but I'm struggling to connect those examples to my specific use case. Any help on this would be greatly appreciated!

EDIT: Here is a pared-down example using the row selection example from the documentation:

https://codesandbox.io/s/new-wood-6crzy?file=/src/ConnectedTable.js:781-797

This example isn't working entirely because I can't get it to work. Clicking the x button next to the number of items selected clears selection, but as soon as I add some mechanism to update my selectedItems in the store when selection happens in the table, that's when it fails.