Warum muss jede React-Komponente useDispatch verwenden?

Question

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

Answer 1

例如，该调度函数将在您的测试中发生变化。

如果没有测试，在某些环境中这样做本身并不是“错误”，但也不是一个大胜利。
如果你的应用程序中有一行 const dispatch = useAppDispatch(); ，那么很有可能，当 js 包被 gzip 传输时（现在这很正常），它会 gzip 到 3 或 4无论如何字节。

如果您确实想删除此处的代码，请删除 useCallback ，因为将回调直接传递到 html 时完全没有必要。