為什麼每個 React 元件都需要使用 useDispatch？
是的，這個問題似乎與這個問題重複：
每個元件應該有一個 useDispatch 嗎？
但它並不重複。我提供不同的方法：
假設我有 3 個子元件，它們都使用 Redux Toolkit 的調度函數。
通常的方式是這樣的：
const ChildA = () => {
const dispatch = useAppDispatch();
const incr = useCallback(() => {
dispatch(increment());
}, [dispatch]);
return <button onClick={incr}>ChildA</button>;
};
const ChildB = () => {
const dispatch = useAppDispatch();
const incr = useCallback(() => {
dispatch(increment());
}, [dispatch]);
return <button onClick={incr}>ChildB</button>;
};
const ChildC = () => {
const dispatch = useAppDispatch();
const incr = useCallback(() => {
dispatch(increment());
}, [dispatch]);
return <button onClick={incr}>ChildC</button>;
};
export const MyApp = () => {
const dispatch = useAppDispatch();
const count = useAppSelector((state) => state.counter.value);
const incr = useCallback(() => {
dispatch(increment());
}, [dispatch]);
return (
<div>
<button onClick={incr}>MyApp</button>
<ChildA />
<ChildB />
<ChildC />
<div>{count}</div>
</div>
);
};
但是如果我這樣做呢？請參閱：
export const glo: {
dispatch: ReturnType<typeof useAppDispatch>;
} = {
// @ts-ignore
dispatch: null
};
const ChildA = () => {
const incr = useCallback(() => {
glo.dispatch(increment());
}, []);
return <button onClick={incr}>ChildA</button>;
};
const ChildB = () => {
const incr = useCallback(() => {
glo.dispatch(increment());
}, []);
return <button onClick={incr}>ChildB</button>;
};
const ChildC = () => {
const incr = useCallback(() => {
glo.dispatch(increment());
}, []);
return <button onClick={incr}>ChildC</button>;
};
export const MyApp = () => {
const dispatch = useAppDispatch();
glo.dispatch = dispatch;
if (!glo.dispatch) {
throw new Error("dispatch is falsy");
}
const count = useAppSelector((state) => state.counter.value);
const incr = useCallback(() => {
glo.dispatch(increment());
}, []);
return (
<div>
<button onClick={incr}>MyApp</button>
<ChildA />
<ChildB />
<ChildC />
<div>{count}</div>
</div>
);
};
經我測試，它也運作良好。請告訴我，為什麼我應該按照通常的方式做？現在新程式碼（基於 glo 的程式碼）更大，但那是因為我們只有 3 個子元件。當我們有 30 多個子元件時，基於 glo 的程式碼將會小得多，也更容易理解。
這裡是差異：
https://i.ibb.co/tKWv2Qc/image.png
這是 CodeSandbox 連結：
https://codesandbox.io/s/clever-monad-c99q3k?file=/src/features/index.tsx
##