@wordpress/hooks – How to use createStore from redux

Hello there,

I am trying to use @wordpress/hooks within my 2 plugins. Here the scenario what i wanted to do.

I am using react routing within my 1st plugin in which i am using applyFilters so that new routing can be added from the 2nd plugin.

Here the code what i am using to add routes dynamically in my 1st plugin.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { applyFilters } from '@wordpress/hooks';
import store from './store';

import Home from './components/body/tabs/home/home.jsx';
import Customer from './components/body/tabs/customer/customer.jsx';
import wkwcpos_variable from './config';

export const PAGES_FILTER = 'wkwcpos_pages_list';

export function getPages() {

	const pages = [
		{
			name: 'Customers',
			path: '/pos/customers',
			component: Customer
		},
		{
			name: 'Home',
			path: '/pos',
			component: Home
		}

	];

	return applyFilters( PAGES_FILTER, pages );
}

document.addEventListener("DOMContentLoaded", () => {

	ReactDOM.render(
	<Provider store={store}>
		<BrowserRouter>
			<Switch>

				{ getPages().map( page => {
					return (
						<Route
							key={ wkwcpos_variable.HOME_URL + page.path }
							path={ wkwcpos_variable.HOME_URL + page.path }
							exact
							name = { page.name }
							component={ page.component }
						/>
					);

				} ) }

			</Switch> 
		</BrowserRouter>
	</Provider>
	,document.getElementById('app'));

});

But when I add new route with my 2nd plugin and add code component from that plugin, it throws an error to provide the store for it. But i need to use the store of 1st plugin inside my 2nd plugin.

import React from 'react';
import { addFilter } from '@wordpress/hooks';
import Booking from './components/body/tabs/booking/booking.jsx';

addFilter( 'wkwcpos_pages_list', 'plugin-domain', pages => {
	return [
		...pages,
		{
			name: 'Booking',
			path: '/pos/booking',
			component: Booking
		}
	];
} );

Here is the booking component,

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Product from './product/product.jsx';

import './less/booking.less';

class Booking extends Component {

    constructor(props) {
        super(props);
    }

    render() {

        var products = this.props.products;
        var listProducts = '';

        if( products.length > 0 ) {

            listProducts = products.map( ( element, i ) => {
                return (
                    <Product key={i} product={element}></Product>
                );
            });
        }

        return (

            <div className="body-wrap">
                {listProducts}
            </div>

        );
    }
}

const mapStateToProps = state => ({
    products: state.products
});

export default connect( mapStateToProps )(Booking);

Here i need to use the state defined in the 1st plugin. Can anyone help me in this?

The page I need help with: [log in to see the link]