import React from 'react';
import { Provider } from "react-redux";
import thunkMiddleware from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import ReactDOM from 'react-dom';
import rootReducer from "./reducers";
import './index.css';
import App from './components/App';

// Hook the redux developer tools browser extension into our store:
export const composeEnhancers =
  (window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

// The thunkMiddleware lets us dispatch actions from within other
// (asynchronuous) actions. This makes it possible to have a single
// action that is invoked by the component to perform multiple steps.
const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunkMiddleware))
);

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