상태를 사용하려면 선택기를 사용해야 합니다.

상태를 사용하려면 선택기를 사용해야 합니다.

안녕하세요 여러분, 어떤 방법을 선호하시는지 질문이 있습니다.

TypeScript를 사용하는 React 기능 구성 요소에서 useSelector를 사용하여 ReduxState에서 값을 가져옵니다: 1)

 const campaign = useSelector(campaignSelector);
 const [audienceSample, setAudienceSample] = useState<number | null>((campaign || 
  {max_completes_total: null})['max_completes_total']);

2)부터

 const campaign = useSelector(campaignSelector);
  const [audienceSample, setAudienceSample] = useState<number | null>(null);
  useEffect(() => {
    setAudienceSample(campaign.max_completes_total)
     },[campaign])

나는 1이 코드가 적은 것을 알지만 당신은 그것이 더 빠르다고 생각하고 당신은 어떤 것을 선호합니까 여러분 감사합니다.

첫 번째 항목이 잘못되었습니다.그리고 다음의 상태 때문에 유효하지 않습니다.useState지속적이며, 에서 설정된 인수.useState는 기본값입니다. 즉, 구성 요소가 처음 마운트될 때만 설정됩니다.따라서 주어진 중복제거 상태와 새로운 값을 변경useSelector로컬 상태에는 영향을 주지 않으며, 원래 기본값을 항상 나타냅니다.

당신의 질문에 대답하는 것 - 대답은 제가 선호하는 것에 관한 것이 아니라, 효과가 있는 것은 두 번째가 적절한 것입니다.그러나 코드 관점에서 가장 좋은 해결책은 null을 기본값으로 설정하고 일반 유형을 설정하는 것을 피하기 위해 두 가지를 모두 약간 병합하는 것입니다.useState다음 코드를 고려합니다.

const campaign = useSelector(campaignSelector);
const [audienceSample, setAudienceSample] = useState(campaign?.max_completes_total); // set campaign as default

useEffect(() => {
   setAudienceSample(campaign?.max_completes_total)
},[campaign]) // set the relation between redux campaign and local state

또한 코드를 단순화하기 위해 선택적 체인을 사용했습니다.로컬 상태의 유형은 다음과 같이 자동으로 추론됩니다.number | undefined.

무엇보다도 당신의 경우는 redux와 local state 사이의 관계를 갖는 것으로 알고 있습니다. 그렇다면 두 번째가 유일한 옵션입니다.기본값만 설정하려는 경우 다음을 사용합니다.useEffect전혀 필요하지 않습니다.

언급URL : https://stackoverflow.com/questions/59172453/should-i-pass-useselector-to-usestate