React Context의 파견...어둠의 예술의 일부입니까?

최근에 저는 우리 회사의 프런트엔드 아키텍처를 설명하는 몇 가지 문서를 작성하라는 임무를 받았습니다. 우리는 상태 관리를 위해 React Context를 사용하며, 우리 버전의 컨텍스트 패턴을 배치하는 방법에 대해 조금 쓰고 있었습니다. 쪼개서.. 도대체 디스패치가 뭔지 정확히 몰랐다는 걸 깨닫기 시작했다. 내가 아는 전부는 디스패치가 useReducer가 내 리듀서에게 상태를 업데이트하라고 마법처럼 알려주는 것이라는 것뿐이었습니다. 어둠의 예술의 일부일 수 있습니까 ?? 그럴듯하지만 대답은 '아니오'입니다.

무슨 일이 일어나고 있는지 이해하고 우리가 주술을 사용하고 있지 않다는 것을 할머니들에게 확신시킬 수 있도록 우리만의 매우 단순화된 파견 버전을 만들어 봅시다.

기본적으로 디스패치는 기능일 뿐입니다.

const dispatch = () => {
};


우리는 작업을 디스패치로 전달한다는 것을 알고 있으며 규칙은 작업이 객체여야 한다는 것입니다.

const dispatch = (action: {}) => {
};


이번 디스패치에는 React 팀의 천재들이 모인 많은 일이 있습니다. 그러나 우리는 디스패치를 ​​의미 있게 만드는 주요 추상화에 초점을 맞출 것입니다. 디스패치는 실제로 감속기를 호출합니다!



const dispatch = (action: {}) => {
    state = reducer(state, action);
};


리듀서가 호출되면 리듀서가 똥을 낸 상태로 설정됩니다. React는 상태가 업데이트되었음을 ​​확인하고 구성 요소를 다시 렌더링합니다. 새 상태는 처음에 useReducer를 호출한 구성 요소로 반환됩니다.

바라건대, 그것은 당신을 위해 파견을 이해하고 할머니가 소중한 손자에 대한 걱정을 덜어줍니다.

좋은 웹페이지 즐겨찾기