4개 기사의 이펙터.

약 1년 전에 나를 위한 새로운 상태 관리자인 이펙터를 만났습니다.
대기업이 다양한 형태와 활동으로 직원을 평가하는 중간 규모의 프로젝트였습니다.
이 도구에 대해 조금 들었습니다. 또한 Youtube에서 비디오를 시청했습니다(하나만 있었습니다). 충분하지 않았습니다.
이펙터와 씨름했던 기억이 납니다. 무슨 일이 일어나고 있는지 이해할 수 없었습니다. 샘플, 시계, 소스, 이벤트, 효과 등과 같은 많은 새로운 단어.

Sergey Sova와 함께 비디오를 보았을 때 모든 것이 바뀌었습니다. 흥미로운 힌트가 많았지만 가장 중요한 것은 이펙터가 흐름이라는 것입니다. 흐름 작업 및 데이터. redux 패러다임에서 마음을 바꾸고 잠시 잊어 버리십시오.

나는 이펙터가 길이라고 상상했고, 로드 빌더처럼 이펙터로 내 스스로가 길을 만든다고 했다. 각 도로는 한 줄의 이펙터 작업입니다.

이벤트 같은 신호등, 샘플 같은 사거리, 가게 같은 주차장 등.
그때부터 나는 이 놀라운 도구에 아무런 문제가 없었습니다.
내 기사 시리즈가 시작하거나 시도하는 데 도움이 되기를 바랍니다.

더 이상 카운터와 TODO가 없습니다.
네 가지 교훈을 보여 드리겠습니다. 처음부터 중간 수준의 논리로 시작하십시오.

내repo.에서 찾을 수 있는 모든 수업

의 시작하자.

간단한 방법으로 이벤트 및 상점

시작하기 전에

이펙터 및 패트로넘 문서에서 더 잘 보이는 것이 거의 없습니다.

Events

Stores

Patronum

작은 구성 요소로 여정을 시작합시다. 일반적으로 유사한 로직의 경우 후크를 사용하는 것이 좋지만 학습을 위해 대신 이펙터를 사용합니다.

일

별이 있는 구성 요소를 만듭니다.

마우스를 올려 놓으면 별의 색상이 변경되어야 합니다.

별은 선택한 등급에 따라 색상을 변경해야 합니다.

첫 번째 단계

여기에서 hoveredRating에 대한 createStore로 스토어를 생성하고 초기 값을 제공합니다.
가장 좋은 방법은 상점 이름을 $ 기호로 시작하는 것입니다.
매장 가치 또는 매장 형태에 대한 유형을 추가할 수 있습니다.

export const $hover = createStore<number>(0, {
  name: 'hover'
})

두번째 단계

이제 createEvent로 이벤트를 생성할 차례입니다. 간단히 말해서 이벤트는 페이로드가 있거나 없는 함수입니다. 이벤트는 일련의 작업을 시작하는 트리거 역할을 합니다. TS는 페이로드가 필요한지 여부를 이해하는 데 도움이 됩니다. 숫자로 페이로드를 줬는데 이제 이 이벤트를 사용하려고 하면 페이로드를 숫자로 기다리고 있습니다.

export const setHoveredRating = createEvent<number>()

세 번째 단계

이것은 마법의 시간입니다. 이벤트를 매장에 연결하십시오. 이해하려고 노력합시다-여기서 무슨 일이 일어나고 있습니까?

$hover.on(setHoveredRating, (_, rating) => rating)

$hover(상점)를 setHoveredRating(이벤트)과 연결했으며 이벤트를 실행하면 매장이 변경됩니다.

콜백을 .on 메소드의 두 번째 인수로 전달합니다.

이 콜백에는 상태 및 이벤트 페이로드라는 두 가지 인수가 있습니다. 매장 데이터가 필요하지 않은 경우 첫 번째 인수 이름을 밑줄('_')로 지정합니다.

일부 페이로드로 setHoveredRating을 호출하면 스토어가 변경됩니다.
어떤 로직이든 할 수 있지만 콜백은 순수 함수여야 합니다.

알아야 할 사항

동일한 페이로드로 이벤트를 트리거하는 경우
(oldState === 이벤트의 페이로드), 상태는 변경되지 않으며 업데이트되지 않습니다.
undefined를 store에 전달하면 store는 변경되지 않고 업데이트되지 않습니다.

우리가 한 일?

스토어 생성

이벤트 생성

이벤트를 상점과 연결하십시오.

다음 레슨에서는 API로 작업하고 useEffect 대신 도구를 사용하는 등의 작업을 할 것입니다.

다음 글에서 뵙겠습니다.