Redux的组成
Store
一个对象，用来存储application level的state，也携带了一些Redux相关的方法，虽然理论上可以支持创建多个，但应该遵序one application one store的原则。
Actions
Actions是plain objects，只用来形容发生了什么（type field），不会形容State如何更新。
Reducers
Reducers是pure function，接收旧state和action，重新计算application state。
React Hooks 与 Redux
createStore
接收三个参数reducer, initial state 和 enhancer middleware，返回一个包含dispatch，subscribe，getState，replaceReducer的对象，局部变量用来存放currentState, currentReducer, currentListeners, isDispatching
Provider
Provider就是一个HOC，本身没有任何试图内入，只展示children，它接收store, context, children, serverState, 返回 <Context.Provider value={contextValue}>{children}</Context.Provider>
其中contextValue来自:
const contextValue = useMemo(() => {
const subscription = createSubscription(store)
return {
store,
subscription,
getServerState: serverState ? () => serverState : undefined,
}
}, [store, serverState])
store是createStore出来的, 由开发者传入
subscription由createSubscription工厂函数创建
getServerState是SSR相关，不做讲解
Provider还做了一件事：
const previousState = useMemo(() => store.getState(), [store]);
获取了一次最新 state 并命名为 previousState，只要 store 单例不发生变化，它是不会更新的。一般项目中也不太会改变 redux 单例。
useIsomorphicLayoutEffect(() => {
const { subscription } = contextValue;
subscription.onStateChange = subscription.notifyNestedSubs;
subscription.trySubscribe();
if (previousState !== store.getState()) {
subscription.notifyNestedSubs();
}
return () => {
subscription.tryUnsubscribe();
subscription.onStateChange = undefined;
};
}, [contextValue, previousState]);
useIsomorphicLayoutEffect
export const canUseDOM = !!(
typeof window !== "undefined" &&
typeof window.document !== "undefined" &&
typeof window.document.createElement !== "undefined"
);
export const useIsomorphicLayoutEffect = canUseDOM
? useLayoutEffect
: useEffect;
这个hook内容很简单，服务器端使用useEffect，客户端使用useLayoutEffect， useEffect与useLayoutEffect的区别在于前者不会阻塞渲染，异步执行，后者阻塞渲染，同步执行，因此useLayoutEffect与componentDidMount是等价的。
为什么要放在useLayoutEffect/useEffect中来做，因为useEffect的调用时自下而上的，这是能确保子组件的渲染更新都已经发生了
useSelector
这里要提到一个概念叫组件外部状态（区别于组件内部状态以及局部内部状态），组件外部状态对象一般要实现的通用接口
interface ExternalStore<T> {
getState(): T;
subscribe(listener: () => void): () => void;
dispatch(updater: T | ((prevState: T) => T)): void;
}
你会发现跟store很像，那么我们可以写一个hook用来监听它的变化
export const useCustomStore = <T>(store: ExternalStore<T>) => {
const [state, setState] = useState(store.getState());
useEffect(() => {
const unsubscribe = store.subscribe(() => {
setState(store.getState());
});
return () => { unsubscribe(); };
}, []);
return state;
};
通过useState创建状态机，并且通过getState方法赋予其初始值，最后通过subscribe函数监听state的变化，调用setState方法更新state值。至此，我们就实现了一个有缺陷的useSelector方法（无法返回state中的某个属性）。
当然，我们也可以将这件事交给React负责，使用useSyncExternalStore API：
export const useExternalStore = <T>(store: ExternalStore<T>) => {
return useSyncExternalStore(
store.subscribe,
store.getState
);
};
那么，真实的useSelector使用的是什么呢？它使用了React 额外提供了带 Selector 优化的useSyncExternalStoreWithSelector。假如不带selector，那么我们每次监听的state变化范围是整体，但如果带了selector，我们可以只关心局部的变化，这个API需要额外提供selector函数，也可以选择性提供isEqual函数。于是就产生了如下的代码：
let useSyncExternalStoreWithSelector = notInitialized as uSESWS
const refEquality: EqualityFn<any> = (a, b) => a === b
export function createSelectorHook(
context = ReactReduxContext
): <TState = unknown, Selected = unknown>(
selector: (state: TState) => Selected,
equalityFn?: EqualityFn<Selected>
) => Selected {
const useReduxContext =
context === ReactReduxContext ? useDefaultReduxContext : () => useContext(context)
return function useSelector<TState, Selected extends unknown>(
selector: (state: TState) => Selected,
equalityFn: EqualityFn<NoInfer<Selected>> = refEquality
): Selected {
const { store, subscription, getServerState } = useReduxContext()!
const selectedState = useSyncExternalStoreWithSelector(
subscription.addNestedSub,
store.getState,
getServerState || store.getState,
selector,
equalityFn
)
useDebugValue(selectedState)
return selectedState
}
}
export const useSelector = createSelectorHook()
可以看出useSelector其实就是createSelectorHook的闭包，闭包的参数均由useDefaultReduxContext提供
useReduxContext
export function useReduxContext(): ReactReduxContextValue | null {
const contextValue = useContext(ReactReduxContext)
return contextValue
}
createContext<ReactReduxContextValue>(null as any)
useContext
Context的作用就是对它所包含的组件树提供全局数据共享。可以使用useContext跨域组件（爷孙，兄弟）之间传递变量，实现数据共享。
useDispatch
function createDispatchHook<S = RootStateOrAny, A extends Action = AnyAction>(
context?: Context<ReactReduxContextValue<S, A>> = ReactReduxContext
) {
const useStore =
context === ReactReduxContext ? useDefaultStore : createStoreHook(context);
return function useDispatch<
AppDispatch extends Dispatch<A> = Dispatch<A>
>(): AppDispatch {
const store = useStore();
return store.dispatch;
};
}
export const useDispatch = createDispatchHook();
useDispatch非常简单，就是通过useStore()拿到 redux store，然后返回store.dispatch，用户就能使用这个dispatch派发action了。
