import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './router'
import { useAppSelector, useAppDispatch, shallowEqualApp } from './store'
import { changeMessage } from './store/modules/counter'
import AppHeader from './components/appHeader'

function App() {
  const { counter } = useAppSelector((state) => state, shallowEqualApp)
  const dispatch = useAppDispatch()
  function changeMessageHandler() {
    dispatch(changeMessage('hahah'))
  }
  return (
    <>
      <AppHeader />
      <Suspense fallback="loading...">
        <div className="App">{useRoutes(routes)}</div>
      </Suspense>

      {/* <div>当前计数{counter.count}</div>
      <div>message: {counter.message}</div>
      <button onClick={changeMessageHandler}>修改message</button> */}
    </>
  )
}

export default App