import React from 'react';
import './global.scss';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import { BrowserRouter } from "react-router-dom";
import { SyncLoader } from 'react-spinners';
import service from './middleware/service';
import reducers from './reducers';
import Header from './components/Header';
import LoadableRoute from './LoadableRoute';

const store = createStore(reducers, applyMiddleware(service));

const App = () => (
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Header />
        <LoadableRoute exact path="/" component={() => import('./pages/Home')} loading={SyncLoader} />
        <LoadableRoute path="/about" component={() => import('./pages/About')} loading={SyncLoader} />
      </div>
    </BrowserRouter>
  </Provider>
);
export default App;