Where should I insert redux provider tag in a powerapp component platform app?

Question

In a typical regular react app with redux, is wrapping app tag like this (in index.ts):

ReactDOM.render(
  <React.StrictMode>
    <Provider store = {store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

But in a PCF application I don't have any app tag, but several independent react components in their own containers, something like that (in index.ts):

public updateView(context: ComponentFramework.Context<IInputs>): void
{
    ...
    ReactDOM.render(React.createElement(Main, this.props),this.containerMain);
    ReactDOM.render(React.createElement(PanelButtons, this.props),this.containerAside);
    ReactDOM.render(React.createElement(PanelAux, this.props),this.containerAux);
    ...
}

Where should I insert the provider to wrapping the entire application?

Answer 1

Probably in all of those calls if anything in their respective trees required Redux. You are aware that you could rename the file to .tsx and just use <Main {...this.props} /> instead of React.createElement(Main, this.props)?

That would make the wrapping easier to read ;)