모든 React 구성 요소가 useDispatch를 사용해야 하는 이유는 무엇입니까?

Question

예, 이 질문은 다음 질문과 중복된 것 같습니다:

모든 구성 요소에 useDispatch가 있어야 합니까?

하지만 반복되지는 않습니다. 저는 다양한 방법을 제공합니다:

3개의 하위 구성 요소가 있고 모두 Redux Toolkit의 디스패치 기능을 사용한다고 가정합니다.

일반적인 방법은 다음과 같습니다.

으아악

그런데 이렇게 하면 어떡하지? 참조:

으아악

테스트 결과에도 잘 작동합니다. 왜 평소대로 해야 하는지 알려주세요. 이제 새 코드(glo 기반 코드)가 더 커졌지만 이는 하위 구성 요소가 3개뿐이기 때문입니다. 30개 이상의 하위 구성 요소가 있으면 glo 기반 코드가 훨씬 작아지고 이해하기 쉬워집니다.

차이점은 다음과 같습니다.

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

CodeSandbox 링크는 다음과 같습니다:

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

Answer 1

예를 들어 이 디스패치 기능은 테스트에서 변경됩니다.

테스트하지 않고 일부 환경에서 이 작업을 수행하는 것은 그 자체로 "버그"는 아니지만 큰 승리도 아닙니다.
애플리케이션에 const dispatch = useAppDispatch(); 줄이 있으면 js 패키지가 gzip으로 압축될 때(요즘은 일반적임) 어쨌든 3~4바이트로 gzip으로 압축될 가능성이 높습니다.

정말로 여기서 코드를 제거하려면 콜백을 html로 직접 전달할 때 완전히 불필요하므로 useCallback를 제거하세요.