Hooks

useSelector

type Comparator<V> = function (left: V, right: V): boolean

function useSelector<Store, Selected>(selector: Store => Selected, comparator: Comparator<Selected>)

• 只有回傳的數值變動時才會觸發 re-render。

• 不同於 connect API，使用的是 === 比對，而非 shallow equality。

  • 如果需要 shallow equality，可以使用 import { shallowEqual } from "react-redux"：

    import { useSelector, shallowEqual } from "react-redux";
    
    const selector = store => store;
    const value = useSelector(selector, shallowEqual);
    

• 如果 useSelector 中的 selector 為 inline function，則此 function 每次 re-render 的是重新生成的，因此每次 re-render 都會執行。

  • 如果 selector 跟 props 及 state 無關的話，或是只用在單一元件，可以將 selector 的宣告移出 function component 。

useDispatch

回傳 dispatch function。