Redux，React-Router接入Hooks

Redux，React-Router接入Hooks

随着react hooks发布之后，react生态也更新相关对的函数式组件hooksAPIs

React-Redux

👉React-Redux7.1 提供了 useSelector 、 useActions 、useDispatch 、useStore，可代替connect()高阶组件

useSelector

const result: any = useSelector(selector: Function, equalityFn?: Function)

允许您使用选择器功能从Redux存储状态提取数据

选择器函数应该是纯函数，因为它可能在任意时间点多次执行

从概念上讲，selector 函数与 connect 的 mapStateToProps的参数是差不多一样的。selector 函数被调用时，将会被传入Redux store的整个state，作为唯一的参数。每次函数组件渲染时， selector 函数都会被调用。useSelector()同样会订阅 Redux 的sotre，并且在你每 分发(dispatch) 一个 action 时，都会被执行一次

注意点：当 分发(dispatch) 了一个action时，useSelector()会将上一次调用 selector函数结果与当前调用的结果进行引用(===)比较，如果不一样，组件会被强制重新渲染。如果一样，就不会被重新渲染

优化：进行浅比较

import { useSelector, shallowEqual } from 'react-redux'

export function useShallowEqualSelector(selector) {
  return useSelector(selector, shallowEqual)
}

useActions

废弃，不推荐使用（actionCreater）

useDispatch

const dispatch = useDispatch()

useStore

const store = useStore()

dva中使用

dva在2.6.0-beta.6中已支持以上几个hooksAPI，可直接使用

import { useSelector, useDispatch } from 'dva';

React-Router

👉React-Router 提供了useHistory 、useNavigate、useLocation、useParams、useRoutes、

useNavigate

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

useLocation

let location = useLocation();

useParams

const { flag } = useParams();

useRoutes

// v6
function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}