TypeScript를 사용하여 한 줄에 상태기 작성

아, 네, 국가 기계예요.이 일은 줄곧 트위터에 올라오거나 CS개념이 대학에서 매 학기에 한 번씩 나타난다(그리고 영원히 돌아오지 않을 것 같다...).전방 세계가 Redux에 대해 갈수록 불만족스러워지면서 상태기는 oneofmany 개발자들이 최근에 이야기한 화제이다.
그러나 Redux 등과 달리 상태기가 프로젝트에 설치된 라이브러리는 아닙니다!일단 네가 개념적으로 그것들을 이해하게 되면, 그것들은 스스로 문제를 사고하는 방식이 될 것이다.
요컨대 이 문장은 너를 도울 수 있을 거야...

부울 표지와 상태 변수가 언제 너무 복잡해졌는지 확인

라이브러리 없는 산란 상태기 작성

상태기의 개념에 대해 더 많이 알고 XState가 언제 좋은 생각일지

앞으로
⚠️ 참고: 다음 예제에서는 React가 사용됩니다.그러나 핵심 학습 개념은 어떠한 전단 프레임워크로 옮겨진다

개념 먼저 한 장면

만약 우리가 UI의 복잡성을 이야기한다면, 폼 관리는 가장 쉽게 볼 수 있는 곳이다.만약 우리가 간단한 등록 화면을 가지고 있다면, 사용자 이름과 비밀번호를 사용해서 실현해야 한다.일을 좀 재미있게 하자. 우리가 믿을 수 없는 어린 시절의 기억을 회복하고 있다고 가정하자. 즉, !
Club Penguin
움츠러들지 마라.적어도 플래시에 만들어진 건 아니에요.😬
우리는 또한 사용자가 표를 작성할 때 일부 장면을 고려하기를 바란다.즉, a) 제출 전 암호 검증과 b) API에 보낼 때 제출 단추를 사용하지 않도록 지원해야 한다.다음은 가능한 흐름입니다.

일반적인 방법: 만리블

우선, 많은 개발자들이 취할 수 있는 방법 을 소개합니다.우리가 원하는 상호작용에 근거하여 우리는 마땅히

암호가 잘못되었을 때

API를 제출할 때

성공적으로 커밋되었는지 여부(다음 화면으로 이동할 수 있음)

우리가 필요로 하는 HTML+컬러 CSS를 귀찮게 하지 않겠습니다(이것(especially coming from a Redux background)의 좋은 것들을 보세요!),우리가 관심을 가지는 부분을 살펴보자.

const ClubPenguinSignup = () => {
  const [invalid, setInvalid] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  ...
  // state vars for username and password, markup, etc.
}

제출/제출 표지판에 대해 우리는 양식을 제출할 때 좋은 리셋 함수를 사용할 수 있다.

const onSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  setSubmitting(true); // we're now submitting
  const addedUser = await arcticAuthService({ username, password });
  if (addedUser?.success) { // if signup call worked...
    setSubmitting(false); // we're no longer submitting
    setSubmitted(true); // we've submitted
    }
};

마지막으로, 우리는 사용자가 비밀번호를 입력할 때 비밀번호를 검증하는 초기본 리셋을 진행할 수 있다.이 경우 입력 값의 변경 사항 (즉, 사용 CodeSandbox 을 수신하고 안전하지 않은 구문 검사기를 통해 이 값을 실행합니다.

const onChangePassword = (event: React.FormEvent<HTMLInputElement>) => {
  setPassword(event.currentTarget.value);
  checkPasswordSecurity(event.currentTarget.value);
};

const checkPasswordSecurity = (changedPassword: string) => {
  let insecure = false; // we first assume the value is secure (excuse the double negative)
  ["club", "penguin", "puffle"].forEach((badWord) => {
    if (changedPassword.includes(badWord)) {
      insecure = true;
    }
  });
  setInvalid(insecure);
};

제어 입력 왁자지껄한 곳

너무 좋아요.이것은 결코 그리 나쁘지 않은 것 같다...하지만 우리는 아직 끝나지 않았다.이 모델을 다시 검사하면 버튼에 표시할 세 개의 다른 표시기가 있습니다 (정상, 불러오기, 완료).각각에 대해 별도의 부울 로고를 사용하기 때문에, 단추 배경 + 맛 텍스트를 설정하기 위해 일부 맵이 필요합니다.

const getButtonLabel = (): string => {
  if (submitting) {
    return "•••";
  } else if (submitted) {
    return "Time to play!";
  } else {
    return "Let's get sliding!";
  }
};

const getButtonClass = (): string => {
  if (submitting) {
    return "submitting";
  } else if (submitted) {
    return "submitted";
  } else if (invalid) {
    return "invalid";
  } else {
    return "";
  }
};

return (
    ...
  <button type="submit" className={getButtonClass()}>
    {getButtonLabel()}
  </button>
)

우리는 원소의 영사기 하나만 필요하기 때문에, 이것은 결코 무서워 보이지 않는다.그럼에도 불구하고 UI와 상태 변수를 더 많이 추가할 때 제어를 잃기 쉽습니다...

const [usenameTaken, setUsernameTaken] = React.useState(false);
const [apiError, setApiError] = React.useState(false);
const [serverAtMaxCapacity, setServerAtMaxCapacity] = React.useState(false);
const [invalid, setInvalid] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const [submitted, setSubmitted] = React.useState(false);

const getButtonClass = (): string => {
  // 100 lines of ifs
};

우리는 불가능한 주도 많이 고려했다.예를 들어 우리는'제출'과'제출'을 동시에 해서는 안 된다. 비밀번호가 잘못되었을 때, 이 두 가지 모두 true 해서는 안 된다.위의 미친 상태가 폭발한 것을 감안하면, 우리는 최종적으로 이러한 무효 상태를 방지하기 위해 모든 변수를 회복할 것이다.

// api responds that servers are at max capacity, so no sign ups allowed
setServerAtMaxCapacity(true)
setSubmitting(false)
setSubmitted(false)
setApiError(true)
...

만약 무엇이 다르다면, 우리는 부울 값이 두 개가 넘으면 표지판을 여기저기 바꾸지 않을 것이다.다행히도 TypeScript는 우리에게 이런 초능력을 주었다💪

우리의 새로운 방법: 가난한 사람들의 상태기

네가 이미 짐작한 바와 같이, 우리는 간단한 상태기로 이 부광 문제를 해결할 수 있다.나는 이런 방법을'the'라고 하는데, 이것도 매우 적합한 제목이라고 한다.
상태 변수를 단일 유형으로 모델링하는 Xstate 라이브러리가 필요합니다.

type FormState = 'idle' | 'invalid' | 'submitting' | 'submitted'

당신은 당연히 이 때문에 매거를 사용할 수 있습니다.나는 단지 문자열 문자를 더 좋아할 뿐이다. 왜냐하면 그것들은 좀 짧고, 가독성이 더욱 강하기 때문이다.
유형을 정의하면 모든 상태 변수를 하나로 압축할 수 있습니다.

const [formState, setFormState] = React.useState<FormState>("idle");

여기서 비밀번호를 재구성하고 리셋을 제출하는 것은 매우 쉽다.

const checkIfPasswordIsSecure = (changedPassword: string) => {
    setFormState("idle"); // not invalid yet
    ["club", "penguin", "puffle"].forEach((badWord) => {
      if (changedPassword.includes(badWord)) {
        setFormState("invalid"); // oops! Looks like it's invalid after all
      }
    });
  };

const onSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  if (formState === "invalid") return; // don't submit if our password is invalid
  setFormState("submitting");
  const addedUser = await arcticAuthService({ username, password });
  if (addedUser?.id) {
    setFormState("submitted"); // no need to set submitting to false, since we don't have 2 states to consider anymore!
    }
};

우리가 비추는 버튼className을 기억하십니까?우리의 상태는 문자열로 표시되기 때문에 우리는 그것들을 CSS에 직접 전달할 수 있다✨

return (
    <button type="submit" className={formState /* our state is our CSS */}>
        ...
  </button>
)

이런 방법은 CSS를 제어하기에 매우 편리하다.우리는 끊임없이 클래스를 추가하고 삭제할 필요가 없다. 단지 어떤 클래스를 적용하는지 바꾸기만 하면 된다.
우리의 새로운 방법을 사용하다✨

이것은 작업 코드 샌드박스이다 진일보하다🚀

물론, 이것은 매우 간단한 예시이며, 당신의 용례에 그다지 적합하지 않을 수도 있습니다.예를 들어, 주어진 시간에 여러 상태를 유지하거나 잘못된 변환을 방지할 수 있습니다. 예를 들어, 먼저 idle 을 통과하지 않으면 submitted 에서 submitting 로 전환할 수 없습니다.
전자는 여러 개의 상태 변수만 필요할 수 있으므로 여러 개FormState 유형을 만들어서 기분이 어떤지 고려해 보십시오.그럼에도 불구하고, 당신은 충분한 복잡성을 가지고 있을 수 있기 때문에, 주 관리 창고는 매우 의미가 있다.봐라 , 이게 너처럼 들리면!
당신을 놀라게 하기 위해서 저는 인터넷에서 몇 가지 고품질의 프레젠테이션을 찾았습니다. 볼 만합니다.

보다 복잡한 ReactJS 양식 작성 정보이것은 매우 길지만, 네가 시간을 쓸 만한 가치가 있다.

Vanilla JS 드래그 앤 드롭 상호 작용 생성 정보이것은 더욱 밀집된 CSS이며, className 수법을 내가 위에서 보여 주었다.

프레임 간에 상태기 모델링 UI를 사용합니다.이 주제에 관한 최고의 회의 강연

X 상태 뭐 공부 해요?

아주 좋아요.만약 당신이 놓쳤다면, 나는 을 발표하여 더 많은 이런 지식의 보고를 탐색할 것이다!
이 일은 웹 개발 문제를 해결했다my "web wizardry" newsletter.다시 말하면 우리의 모든 웹 프로젝트를 돌아가는 서투른 브라우저 API, 구부러진 CSS 규칙, 반접근 가능한 HTML은 무엇입니까?만약 네가 틀을 뛰어넘고 싶다면, 이것은 너에게 주는 것이다, 사랑하는 인터넷 마법사🔮
"first principles" . 나는 영원히 가르치고 스팸메일을 보내지 않겠다고 보증한다❤️