Heim > Fragen und Antworten > Hauptteil
Ja, diese Frage scheint ein Duplikat dieser Frage zu sein:
Sollte jede Komponente einen useDispatch haben?
Aber es wiederholt sich nicht. Ich biete verschiedene Methoden an:
Angenommen, ich habe drei untergeordnete Komponenten und alle verwenden die Versandfunktion von Redux Toolkit.
Der übliche Weg ist dieser:
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> ); };
Aber was ist, wenn ich das mache? Siehe:
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> ); };
Nach meinen Tests funktioniert es auch gut. Bitte sagen Sie mir, warum ich es auf die übliche Weise tun sollte? Jetzt ist der neue Code (der Glo-basierte Code) größer, aber das liegt daran, dass wir nur drei Unterkomponenten haben. Wenn wir mehr als 30 Unterkomponenten haben, wird der Glo-basierte Code viel kleiner und leichter zu verstehen sein.
Hier sind die Unterschiede:
https://i.ibb.co/tKWv2Qc/image.png
Dies ist der CodeSandbox-Link:
https://codesandbox.io/s/clever-monad-c99q3k?file=/src/features/index.tsx
P粉8458628262024-03-29 12:59:55
例如,该调度函数将在您的测试中发生变化。
如果没有测试,在某些环境中这样做本身并不是“错误”,但也不是一个大胜利。
如果你的应用程序中有一行 const dispatch = useAppDispatch();
,那么很有可能,当 js 包被 gzip 传输时(现在这很正常),它会 gzip 到 3 或 4无论如何字节。
如果您确实想删除此处的代码,请删除 useCallback
,因为将回调直接传递到 html 时完全没有必要。