亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

是的，這個問題似乎與這個問題重複：

每個元件應(yīng)該有一個 useDispatch 嗎？

但它並不重複。我提供不同的方法：

假設(shè)我有 3 個子元件，它們都使用 Redux Toolkit 的調(diào)度函數(shù)。

通常的方式是這樣的：

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>
  );
};

經(jīng)我測試，它也運(yùn)作良好。請告訴我，為什麼我應(yīng)該按照通常的方式做？現(xiàn)在新程式碼（基於 glo 的程式碼）更大，但那是因為我們只有 3 個子元件。當(dāng)我們有 30 多個子元件時，基於 glo 的程式碼將會小得多，也更容易理解。

這裡是差異：

https://i.ibb.co/tKWv2Qc/image.png

這是 CodeSandbox 連結(jié)：

https://codesandbox.io/s/clever-monad-c99q3k?file=/src/features/index.tsx