Is there a way we can have "React Redux" Provider and Consumer in a Mix - React and Non React (Riot) Application?

Question

Objective: Trying to migrate Riot + Redux application to React + Redux application in chunks

Challenge: Accessing Redux store in migrated components

This is How i tried:

1. Proving store at root Riot ( Non-React) component:

   function stateProviderReact() {
     ReactDOM.render(
       <Provider store={store}>
         <ReactAppRoot/>
       </Provider>,
       document.getElementById('kickstartReactId')
     )
   }
   

   Here: ReactAppRoot: Dummy/Empty container having connect method with the intention to have store access to all react components.

   kickstartReactId:

   <div id="kickstartReactId">
       <riot-page if={ isReady } shouldShowHeader={ isCapable } />
   </div>
   

2. Accessing store in react class components like:

   const { config, storeProp, end } = this.props
   

   <ReactReduxContext.Consumer>
     {({ store }) => console.log({store})}
     <ReactComp storeProp={ storeProp } config={ config } end={ end } />
   </ReactReduxContext.Consumer>
   

Any lead will be appreciated ! Thanks !