>웹 프론트엔드 >JS 튜토리얼 >redux는 반응과 어떤 관련이 있습니까?

redux는 반응과 어떤 관련이 있습니까?

青灯夜游
青灯夜游원래의
2020-11-23 11:23:461976검색

React에서는 React-redux 라이브러리를 사용하여 redux를 연결할 수 있습니다. React-redux는 코드를 보다 과학적인 방식으로 구성할 수 있는 일부 캡슐화를 제공하므로 React 코드에서 Redux를 보다 편안하게 사용할 수 있습니다.

redux는 반응과 어떤 관련이 있습니까?

이 튜토리얼의 운영 환경: windows7 시스템, React17 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

Redux 자체는 React와 관련이 없습니다. 앱 상태 관리에 사용되는 일반적인 Javscript App 모듈입니다. React 프로젝트에서 Redux를 사용하는 더 좋은 방법은 React-redux 라이브러리를 사용하여 연결하는 것입니다. 이는 React-redux가 없으면 이 두 라이브러리가 함께 사용되지 않고 더 많은 캡슐화를 제공한다는 것을 의미합니다. 과학적인 코드 정리 방법을 통해 React 코드에서 Redux를 보다 편안하게 사용할 수 있습니다.

리덕스와 반응은 어떻게 함께 작동하나요?

react-redux는 두 가지 기본 친구인 connect와 공급자를 제공합니다. 공급자는 저장소를 구성 요소에 전달합니다. 저장소는 유형에 따라 해당 감속기를 호출합니다. State와 이 Action을 입력한 후 Reducer는 State를 처리하고 새로운 State를 반환하여 Store에 넣습니다. 이때 Connect는 Store의 변경 사항을 모니터링하고 setState를 호출하여 구성 요소를 업데이트합니다. , 구성 요소의 소품도 이에 따라 변경됩니다.

Provider:

Provider는 Store를 props로 받아들인 다음 컨텍스트를 통해 전달하는 구성 요소입니다.

connect:

connect(mapStateToProps, mapDispatchToProps, mergeProps, 옵션)은 4개의 매개변수를 받아들이고 함수를 반환하는 함수입니다. - WrapWithConnect, WrapWithConnect는 구성요소를 매개변수로 받아들이고 WrapWithConnect(구성요소)는 내부적으로 새 구성요소 연결(컨테이너 구성요소)을 정의하고 구성요소를 전달합니다. connect의 하위 구성 요소로 반환된 다음 반환됩니다.

mapStateToProps(state.[ownPros]):

mapStateToProps는 상점의 상태와 사용자 정의 prop이라는 두 개의 매개변수를 허용하고 prop의 일부로 UI 구성 요소에 전달될 새 객체를 반환합니다. 컴포넌트에 필요한 데이터를 기반으로 객체 반환을 사용자 정의할 수 있습니다. ownProps를 변경하면 mapStateToProps

mapDispatchToProps(dispatch,[ownProps]):

mapDispatchToProps가 객체인 경우 바인딩됩니다. 소품으로 저장소의 일부가 UI 구성 요소에 전달됩니다. 이 함수가 두 개의 매개변수를 허용하는 경우, binActionCreators는 액션을 바인딩하고 개체를 전달하고 반환합니다. 이 개체는 props의 일부로 ownProps와 함께 UI 구성 요소에 전달되므로 mapDispatchToProps가 개체인지 함수인지에 관계없이 결국에는 개체를 반환합니다. object. , 함수인 경우 이 개체의 키 값을 사용자 정의할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 redux는 반응과 어떤 관련이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.