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 來做強制更新。
// 17版本之前采用下面的方式進行強制render
const [, forceRender] = useReducer((s) => s + 1, 0);
// 保存最近一次從store中獲取的state
const latestStoreState = useRef(store.getState());
// 保存最近一次通過selector函數返回的值 - 也就是useSelector 返回的值
const latestSelectedState = useRef(selector(latestStoreState.current));
useEffect(() => {
// checkUpdate - 判斷是否強制更新；
function checkUpdate() {
const newState = store.getState();
// state 沒有改變，直接返回；發(fā)生在 reducer 中default的情況；
// 其他情況使用immer，都會返回一個新的state對象（本質還是淺拷貝）
if (newState === latestStoreState) return;
const newSelectedState = selector(newState);
// 默認的 equalityFn 進行的是 === 判斷；
// 所以默認的equalityFn函數的 === 決定了，
// 1 我們不能通過selector函數去返回創(chuàng)建一個新的對象進行返回
// 2 利用淺拷貝的特性，盡量返回state上最小的粒度，保證當前selector返回的值沒有改變時不會執(zhí)行強制更新
if (!equalityFn) equalityFn = (a, b) => a === b;
// 對比新舊SelectedState 數據 是否全等，如果不等 則進行強制更新
if (!equalityFn(newSelectedState, latestSelectedState.current)) {
latestSelectedState.current = newSelectedState;
latestStoreState.current = newState;
forceRender();
}
}
// 執(zhí)行dispatch({type:XXX}) ,會調用 store.subscribe進行監(jiān)聽
// 執(zhí)行checkUpdate函數
const unsubscribe = store.subscribe(checkUpdate);
return () => unsubscribe();
}, [store]);
// useSelector 返回最新的seletor函數返回值
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);
// 寫法三 (傳遞一個equalityFn 函數進行判斷 )
const { project,pages } = useSelector((state: IRootState) => state.prototype,equalityFn);