import { useContext, useEffect, useReducer, useRef, } from 'react';
import StoreContext from './context'; type EqualityFn = (a: T, b: T) => boolean;
export default function useSelector<T, Selected extends unknown>( selector: (state: T) => Selected, equalityFn?: EqualityFn, ): Selected {
const store = useContext(StoreContext);
// 注：react-redux@8-beta 中使用 React18提供的useSyncExternalStoreapi 來做強(qiáng)制更新。
// 17版本之前采用下面的方式進(jìn)行強(qiáng)制render
const [, forceRender] = useReducer((s) => s + 1, 0);
// 保存最近一次從store中獲取的state
const latestStoreState = useRef(store.getState());
// 保存最近一次通過selector函數(shù)返回的值 - 也就是useSelector 返回的值
const latestSelectedState = useRef(selector(latestStoreState.current));
useEffect(() => {
// checkUpdate - 判斷是否強(qiáng)制更新；
function checkUpdate() {
const newState = store.getState();
// state 沒有改變，直接返回；發(fā)生在 reducer 中default的情況；
// 其他情況使用immer，都會返回一個(gè)新的state對象（本質(zhì)還是淺拷貝）
if (newState === latestStoreState) return;
const newSelectedState = selector(newState);
// 默認(rèn)的 equalityFn 進(jìn)行的是 === 判斷；
// 所以默認(rèn)的equalityFn函數(shù)的 === 決定了，
// 1 我們不能通過selector函數(shù)去返回創(chuàng)建一個(gè)新的對象進(jìn)行返回
// 2 利用淺拷貝的特性，盡量返回state上最小的粒度，保證當(dāng)前selector返回的值沒有改變時(shí)不會執(zhí)行強(qiáng)制更新
if (!equalityFn) equalityFn = (a, b) => a === b;
// 對比新舊SelectedState 數(shù)據(jù) 是否全等，如果不等 則進(jìn)行強(qiáng)制更新
if (!equalityFn(newSelectedState, latestSelectedState.current)) {
latestSelectedState.current = newSelectedState;
latestStoreState.current = newState;
forceRender();
}
}
// 執(zhí)行dispatch({type:XXX}) ,會調(diào)用 store.subscribe進(jìn)行監(jiān)聽
// 執(zhí)行checkUpdate函數(shù)
const unsubscribe = store.subscribe(checkUpdate);
return () => unsubscribe();
}, [store]);
// useSelector 返回最新的seletor函數(shù)返回值
return latestSelectedState.current;
}
不同引用的探究
// 寫法一
const { project,pages } = useSelector((state: IRootState) => state.prototype);
// 寫法二
const project = useSelector((state: IRootState) => state.prototype.project);
const project = useSelector((state: IRootState) => state.prototype.project);
// 寫法三 (傳遞一個(gè)equalityFn 函數(shù)進(jìn)行判斷 )
const { project,pages } = useSelector((state: IRootState) => state.prototype,equalityFn);