React-Redux는 어디에 사용되나요?

"react-redux"의 기능: 1. 구성 요소를 컨테이너 구성 요소와 UI 구성 요소로 나눕니다. 2. redux에서 "store.subscribe"를 교체하여 구성 요소의 상태 변경을 모니터링하고 이를 사용하여 구성 요소를 렌더링합니다. redux, 구성 요소가 전역 상태를 쉽게 얻고 구성 요소 간의 통신을 용이하게 할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

react-redux의 용도는 무엇인가요?

react-redux는 redux로 정의된 저장 데이터를 컴포넌트에 주입하면 컴포넌트가 전역 상태를 쉽게 얻고 컴포넌트 간 통신을 촉진할 수 있습니다. 리액트 패키지를 redux 데이터센터(store)에 연결하여 데이터 상태를 수정하는 디스패치 함수를 호출한 후, 렌더링해야 하는 데이터와 업데이트하는 함수를 포함하여 구독 등록을 통해 뷰를 업데이트하는 처리 로직을 트리거합니다. 데이터.

주로 Redux가 필요한 컴포넌트를 입구에서 포장하는데 사용됩니다. 기본적으로 상점은 컨텍스트에 배치됩니다.

redux와 컴포넌트 간의 결합도가 너무 높기 때문에 이를 분리하기 위해 redux가 설계되었습니다. React-redux를 도입하면 더 이상 상태를 직접 구독하기 위해 스토어의 구독을 사용할 필요가 없습니다. UI 구성 요소는 내부에 redux가 없는 일반 구성 요소와 같습니다. 더 읽기 쉽습니다.

Function 1

구성 요소를 컨테이너 구성 요소로 나누고 UI 구성 요소는 props를 사용하여 상태 및 작업 상태를 가져옵니다.

기능 2

redux에서 store.subscribe를 대체하는 Provider 구성 요소를 사용하여 구성 요소의 상태 변경을 모니터링하고 이를 사용하여 구성 요소를 렌더링합니다.

함수 3

컨테이너 구성 요소의 핵심 API 연결을 통해 UI 구성 요소와 redux를 연결합니다. 첫 번째 매개 변수는 두 개의 콜백 함수를 수신하고 상태를 받습니다. UI 구성요소의 원하는 상태를 포함하는 객체 객체를 반환합니다. 콜백 함수 2: 디스패치를 ​​수신하고 UI 구성 요소가 작동하려는 메서드가 포함된 객체를 반환합니다. 작동 상태에 대한 메소드가 포함된 객체에 두 번째 매개변수를 직접 전달하는 간단한 메소드도 있습니다. (핵심: UI 구성요소의 props에 상태 및 디스패치 매핑)

핵심 코드

export default connect(
    state => ({count: state}),
    dispatch => {
        return {
            increment: number => dispatch(increment(number)),
            decrement: number => dispatch(decrement(number)),
        }
    }
)(Counter)

다음은 약어입니다

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)

권장 학습: "react video tutorial"

위 내용은 React-Redux는 어디에 사용되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!