React-Router和Redux的Hooks

react-redux-hook

• react-redux支持了hook的解决方案，提供两个方法，很方便我们在项目去使用
• useSelector 通过传入 selector 函数，你就可以从从 Redux 的 store 中获取 状态(state) 数据。
• useDispatch 通过 dispatch 派发一个方法，执行reducer中的方法。

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'

const MyRedux = () => {
  const { username, password } = useSelector(state => Object.assign({}, state.userInfo))
  const dispatch = useDispatch()

  return (
    <div>
      <h3>{username}</h3>
      <hr />
      <button onClick={
        e => {
          dispatch({
            type: 'setname',
            name: 'aaaaa'
          })
        }
      }>修改一下姓名</button>
    </div>
  )
}

react-router-dom-hook

• useHistory 该钩子提供对 history 对象的访问。
• useLocation 该挂钩提供对 location 对象的访问
• useParams 返回URL参数的键/值对的对象。
• useRouteMatch 当您只需要路由匹配数据而无需实际渲染路由时，可以使用此钩子。

参考案例:React-Router Hooks