Pourquoi chaque composant React doit-il utiliser useDispatch ?
Oui, cette question semble être un double de celle-ci :
Chaque composant devrait-il avoir un useDispatch ?
Mais ce n’est pas répétitif. Je vous propose différentes méthodes :
Supposons que j'ai 3 composants enfants et qu'ils utilisent tous la fonction de répartition de Redux Toolkit.
La manière habituelle est la suivante :
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>
);
};
Mais et si je fais ça ? Voir :
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>
);
};
Après mes tests, cela fonctionne également bien. S'il vous plaît, dites-moi pourquoi je devrais le faire de la manière habituelle ? Maintenant, le nouveau code (le code basé sur Glo) est plus gros, mais c'est parce que nous n'avons que 3 sous-composants. Lorsque nous aurons plus de 30 sous-composants, le code basé sur Glo sera beaucoup plus petit et plus facile à comprendre.
Voici les différences :
https://i.ibb.co/tKWv2Qc/image.png
Voici le lien CodeSandbox :
https://codesandbox.io/s/clever-monad-c99q3k?file=/src/features/index.tsx
