Redux 연결() 기능 살펴보기

반응형

React가 오늘날과 같은 시대에 사용자 인터페이스(UI)를 구축하기 위한 가장 인기 있는 라이브러리 중 하나라는 사실은 비밀이 아니다. 이 블로그를 읽어보신 여러분 대부분은 Redux를 사용하여 이전 프로젝트에서 애플리케이션의 전반적인 상태를 관리했다고 확신합니다.

redux connect() 기능이 어떻게 작동하는지 궁금해 본 적이 있습니까? 또는 connect() 함수를 작성하는 것과 관련된 다양한 자바스크립트 개념은 무엇입니까?

그렇다면, 저는 독자적으로 우리만의 연결() 함수를 작성하는 것과 관련된 자바스크립트 개념에 대해 알려드리도록 하겠습니다. 이 함수들은 Redux 라이브러리에 통합되어 함께 사용될 수 있습니다.

Redux 설명서에 따르면 connect() 함수는

 

먼저 자바스크립트의 고차 함수를 살펴보겠습니다.

자바스크립트는 함수를 퍼스트 클래스 시티즌으로 취급하는데, 이는 함수가 다른 함수를 반환하거나 함수를 다른 함수에 매개 변수로 전달하거나 함수를 변수에 값으로 저장할 수 있다는 것을 의미한다.

기본적으로 고차 함수는 다른 함수를 반환하거나 함수를 매개 변수로 받아들이는 함수일 뿐입니다.

Redux의 connect() 함수는 두 가지 함수(mapStateTops, mapDispatchToProps)를 파라미터로 하는 고차 함수로 구성 요소를 래핑하는 기능도 반환합니다.

위의 Redux connect() 함수의 구현을 보았기 때문에 connect()가 고차 함수라는 것을 알게 되었다. 자체 연결 함수를 작성하기 전에 폐쇄와 카레링에 대해 배울 필요가 있습니다.

 

카레링

커링은 함수 프로그래밍에서 다중 인수를 가진 함수를 일련의 중첩 함수로 변환할 수 있는 프로세스입니다. 다음 인수를 인라인으로 예상하는 새 함수를 반환합니다.

다음은 JavaScript의 예입니다.

혼란스러워요? 이 개념이 실제 시나리오에 어떻게 적용되는가. 제가 시나리오를 하나 드릴게요.

저희 애플리케이션에서는 일부 계산 결과를 2배로 올려야 하는 경우가 있습니다. 우리는 일반적으로 곱셈 함수에 대한 인수로서 2로 결과를 전달함으로써 이를 수행했다: 곱셈(결과, 2);

 

함수는 카레링에서 반환될 수 있으므로 필요에 따라 다른 파라미터 세트와 함께 저장 및 사용할 수 있습니다.

reducx가 currying을 사용하여 connect() 기능을 어떻게 구현하는지 아이디어를 얻었으면 합니다.

export default connect(mapStateToProps, mapDispatchToProps)(OurComponent);

폐쇄

클로저는 단순히 외부 함수가 실행되어 호출 스택에서 제거된 후에도 내부 함수에 의해 접근 가능한 외부 함수의 범위를 의미합니다.

 

외부 함수 A와 내부 함수 B가 있다고 가정합시다.

고차 함수인 Curing의 개념에서, 우리는 커넥트()() 함수가 두 함수를 매개 변수로 가져가고 Curing을 사용하여 구성 요소를 래핑하는 데 사용하는 익명 함수를 반환하는 HOF(고차 함수)라는 것을 배웠다.

그러므로 connect()는 외부 함수인 반면, 반환된 익명 함수는 내부 함수이므로 connect()가 클로저를 사용하여 실행을 완료한 후에도 익명 내부 함수에 의해 전달될 수 있다.

이제 이 모든 것이 준비되었으므로, 우리만의 연결() 함수를 작성하는 것으로 넘어갑시다.

우리만의 연결 함수를 쓰자.

 

우리는 리덕스 스토어에 연결된 증가/감소 동작이 있는 스타터 애플리케이션 카운터를 사용할 것입니다. 그래서 우리만의 연결 기능을 먼저 작성한 후, 작동 중인 애플리케이션을 통합하는 것이 계획이에요.

카운터 애플리케이션의 GitHub 링크는 다음과 같습니다.

깃허브-소유_연결_fn_스타터

카운터 값이 redux 저장소에 저장되는 간단한 카운터 애플리케이션으로, redux 동작을 보내고 리듀서를 업데이트하여 증가 또는 감소시킬 수 있습니다. React-redux connect() 기능을 사용하여 카운터 구성 요소를 redux 저장소에 연결합니다.

 

우리의 이해는 커넥트()가 두 함수를 인수로 사용하고 익명 함수를 반환하는 HOF(High-Order Function)라는 것이다. 이 아이디어를 바탕으로 해봅시다.

이제 익명 함수가 우리의 구성 요소를 인수로 받아들임으로써, 우리는 그것을 Curing과 함께 넘길 수 있습니다. 다음으로 Anonymous Function 내에 익명 클래스 구성 요소를 만들고 Anonymous Function에 의해 클래스가 반환됩니다.

여기서는 익명 클래스를 사용하여 HOF 패턴을 기반으로 하는 익명 함수 내부에 WrappedComponent를 반환하고 있습니다.

이제 mapStateToProps 및 mapDispatchToProps에서 생성된 소품과 함께 구성요소 소품을 전달할 수 있습니다. 구현에서는 mapStateTops가 매개 변수로 전체 reduces 상태 및 구성 요소 소포를 필요로 하는 반면 mapDispatchTops는 매개 변수로 디스패치 함수와 구성 요소 소포를 필요로 한다고 명시한다.

컴포넌트 소품은 this.props로 접근할 수 있지만, reducks 스토어의 상태와 디스패치 방법은 어떻게 얻나요?

 

우리의 애플리케이션에 redux를 통합하는 과정에서 스토어가 생성될 것입니다. 우리는 그 스토어를 수출하고 우리의 connectFn 파일로 수입할 것입니다. 우리는 그 가게 물건을 이용해서 접근할 수 있습니다.

아직 할 일이 있어 이때 구성요소가 오류 없이 화면에 렌더링되는 것을 관찰할 수 있지만, 증분/감소를 클릭해도 카운터 값이 업데이트되지 않습니다. 왜냐하면 부품이 상태가 변할 때마다 다시 렌더를 해야 하기 때문입니다.

우리는 스토어에 가입하여 상태 변화가 있을 때마다 렌더링하면 됩니다.

connectFn을 가져올 수 있으며 다음과 같이 사용할 수 있습니다.

export default connectFn(mapStateToProps, mapDispatchToProps)(Counter);

 

다 됐다! 더 이상 어쩔 수 없다! 우리는 자체 연결 기능을 구축하여 Redux 스토어와 통합했습니다.

깃허브 레포의 마지막 코드

유용하길 바래
A ️는 멋진 일 것입니다.

해피 코딩

plainenglish.io에서 더 많은 콘텐츠를 확인하십시오. 무료 주간 뉴스레터에 가입하십시오. 우리 커뮤니티 Discords에서 글쓰기 기회와 조언을 독점적으로 이용하세요.