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