import React from 'react';
import ReactDom from 'react-dom';
import {createStore, applyMiddleware,compose} from 'redux';
import thunk from 'redux-thunk'
import {Provider} from 'react-redux';
import { BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom';

import App from './App';
import {counter} from './index.redux';

//用來配置調(diào)試redux工具用，組合函數(shù)用的compose
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
//處理中間件applyMiddleware
const store =  createStore(counter,composeEnhancers(
    applyMiddleware(thunk))
);
function Erying(){
    return <h1>二營</h1>
}
function Qibingying(){
    return <h1>騎兵連</h1>
}
ReactDom.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <ul>
                    <li>
                        <Link to='/'>一營</Link>
                    </li>
                    <li>
                        <Link to='/erying'>二營</Link>
                    </li>
                    <li>
                        <Link to='/qingbinglian'>騎兵連</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path='/' exact component={App}></Route>
                    <Route path='/erying' component={Erying}></Route>
                    <Route path='/qingbinglian' component={Qibingying}></Route>
                    {/* <Redirect to='/qishi'></Redirect> */}
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
)