Redux connect() 함수 보기

React는 현재 시대에 사용자 인터페이스를 구축하는 데 사용되는 가장 인기 있는 라이브러리 중 하나이며, 이것은 이미 비밀이 아니다.나는 대부분의 이 블로그를 읽은 사람들이 이전 프로젝트에서 Redux를 사용하여 응용 프로그램의 전체 상태를 관리한 적이 있다고 믿는다.
Redux connect () 함수가 어떻게 작동하는지 생각해 보셨습니까?또는 connect() 함수를 작성하는 데 관련된 JavaScript 개념은 무엇입니까?
이 경우, 우리의connect () 함수를 작성하는 데 관련된 자바스크립트 개념을 소개한 다음, 이를 Redux 라이브러리에 집적하여 사용할 수 있습니다.
Redux 문서에 따라 connect () 함수가 반환됨

The return of connect() is a wrapper function that takes your component and returns a wrapper component with the additional props it injects. In most cases, the wrapper function will be called right away, without being saved in a temporary variable: export default connect(mapStateToProps, mapDispatchToProps)(Component).

먼저 JavaScript의 고급 함수를 살펴보겠습니다.

무엇이 고급 함수입니까?

JavaScript는 함수를 첫 번째 클래스 시민으로 간주합니다. 즉, 함수가 다른 함수로 되돌아오거나 다른 함수에 매개 변수로 전달되거나 변수에 함수가 값으로 저장될 수 있습니다.
기본적으로 고급 함수는 다른 함수를 되돌려주거나 하나의 함수를 매개 변수로 받아들이는 함수일 뿐이다.
Redux의connect() 함수는 두 함수(mapStateToProps와mapDispatchToProps)를 매개 변수로 하고 봉인된 구성 요소의 함수를 되돌려주는 고급 함수입니다.

const mapStateToProps = state => {
  return {};
}
const mapDispatchToProps = dispatch => {
  return {};
}
export default connect(mapStateToProps, mapDispatchToProps)(OurComponent);

현재 우리는 상술한 Redux의connect () 함수의 실현을 보았고, 우리는connect ()가 고급 함수라는 것을 안다.자신의connect () 함수를 작성하기 전에, 클립과curry를 알아야 합니다.

카레

curry는 함수 프로그래밍의 한 과정이다. 이 과정에서 우리는 여러 개의 매개 변수를 가진 함수를 일련의 삽입 함수로 변환할 수 있다.그것은 다음 내연 파라미터가 필요한 새로운 함수를 되돌려줍니다.
다음은 JavaScript의 예입니다.

rrying-1.js
function multiply(a, b) {
  return a * b;
}
// Generally, we will call the above function as multiply(1, 2)
// Lets make this function as a curried one
function multiply(a) {
  return (b) => {
    return a * b;
  }
}
// We can call the curried multiply function as follows
// multiply(1)(2);

곤혹스러웠어이 개념은 어떻게 현실 세계의 장면에 응용될 것인가.내가 너에게 장면을 하나 줄게.
우리의 응용 프로그램에서, 몇몇 계산 결과는 반드시 갑절이 되어야 한다.우리는 보통 다음과 같은 방식으로 2의 결과를 매개 변수로 곱셈 함수에 전달한다. 곱셈(result, 2).
함수는curry에서 되돌아올 수 있기 때문에 그것을 저장하고 필요할 때 다른 매개 변수 집합과 함께 사용할 수 있습니다.

function multiply(a) {
  return (b) => {
    return a * b;
  }
}
// Returns a function, which can be used with other set of parameters
const double = multiply(2);
// Using curried function with result, instead of passing same argument again and again.
const doubledResult = double(result);

레드ux가curry를 사용하여connect () 함수를 어떻게 실현하는지 알고 싶습니다.

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

가방을 닫다

패키지는 내부 함수가 접근할 수 있는 외부 함수의 범위를 가리킨다. 외부 함수가 실행되고 호출된 창고에서 제거되었음에도 불구하고.
외부 함수 A와 내부 함수 B가 있다고 가정하십시오.

function A() {
  const msgFromOuterFn = 'I am from Outer function scope';
  function B() {
    console.log(msgFromOuterFn);
  }
  return B;
}
// A returns a function B, In JavaScript when ever any function completes its execution, its scope is removed from the heap. So all the variables declared in its scope won't be available once its execution is done.
const returnedFn = A();
// A() completed its execution, so the value msgFromOuterFn will not able available.
// With JS Closures, even the outer function completed execution, inner functions are able to access the outer functions scope.
console.log(returnedFn());
// Will print its value, instead of throwing an error

(고급 함수인 커리잉(Currying)의 개념에서 우리는 connect()() 함수는 HOF(고급 함수)로 두 함수를 매개 변수로 받아들이고 익명 함수를 되돌려준다는 것을 알았다. 커리잉을 사용하여 구성 요소를 포장한다.
따라서 connect () 는 외부 함수이고, 되돌아오는 익명 함수는 내부 함수이기 때문에 connect () 에 전달되는 도구는 익명 내부 함수에 접근할 수 있습니다. connect () 를 사용하여 패키지를 실행한 후에도 마찬가지입니다.
이제 이 모든 것이 준비되었으니, 우리 자신의connect () 함수를 계속 작성합시다.
우리로 하여금 자신의connect () 함수를 작성하게 하다
우리는 starter 프로그램 카운터를 사용할 것입니다. 이것은 Redux 저장소에 연결된 증가/감소 동작을 가지고 있습니다.따라서 우리의 계획은 먼저 자신의 연결 함수를 작성한 다음에 작업 응용 프로그램을 통합시키는 것이다.
카운터 애플리케이션의 GitHub 링크는 다음과 같습니다.
Github-own_connect_fn_starter

간단한 계수기 프로그램으로, 계수기 값이 Redux 저장소에 저장되어 있으며, Redux 조작을 조정하고 Reducer를 업데이트함으로써 계수기 값을 증가하거나 줄일 수 있다.카운터 구성 요소는 react redux connect () 함수를 사용하여 redux 저장소에 연결합니다.
우리의 이해는 connect () 는 두 함수를 매개 변수로 하고 익명 함수를 되돌려 주는 HOF (고급 함수) 이다.우리 이 생각을 기초로 하자.

// connectFn.js file
const connectFn = (mapStateToProps, mapDispatchToProps) => {
  return () => {
  }
}
export { connectFn };

현재, 익명 함수는 우리의 구성 요소를 매개 변수로 받아들여서curry를 통해 전달할 수 있습니다.다음에, 우리는 익명 함수에 익명 클래스 구성 요소를 만들 것입니다. 이 클래스는 익명 함수로 되돌아옵니다.

// connectFn.js file
import React, { Component } from 'react';

const connectFn = (mapStateToProps, mapDispatchToProps) => {
  return (WrappedComponent) => {
    return class extends Component {
      render() {
        return (
          <WrappedComponent />
        );
      }
    }
  }
}

export { connectFn };

여기에서 anonymous 클래스를 사용하여 HOF 모드를 기반으로 하는 익명 함수에서 WrappedComponent를 되돌려줍니다.
우리는 현재 구성 요소 도구와 맵StateToProps와 맵DispatchToProps가 생성한 도구를 전달할 수 있습니다.이 실현은 mapStateToProps는 전체적인 Redux 상태와 구성 요소 도구를 매개 변수로 하고 mapDispatchToProps는 매개 변수로 분배 함수와 구성 요소 도구를 필요로 한다는 것을 설명한다.

const mapStateToProps = (state, ownProps) => {
  return {};
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {};
}

구성 요소 도구는 이것을 통해 접근할 수 있습니다.아이템, 하지만 우리는 어떻게 레드ux 상점의 상태와 스케줄링 방법을 획득합니까?
레드ux를 응용 프로그램에 통합하는 과정에서 저장소를 만들 것입니다.이 저장소를 내보내서 connectFn 파일로 가져옵니다.스토리지 객체를 사용하여 액세스할 수 있습니다.

// store.js

import { createStore } from 'redux';

import reducer from './reducer';

const store = createStore(reducer);

export { store };

import React, { Component } from 'react';
import { store } from './redux/store';

const connectFn = (mapStateToProps, mapDispatchToProps) => {
  return (WrappedComponent) => {
    return class extends Component {
      render() {
        console.log(this.props)
        return (
          <WrappedComponent 
            {...this.props}
            {...mapStateToProps(store.getState(), this.props)}
            {...mapDispatchToProps(store.dispatch, this.props)}
          />
        );
      }
    }
  }
}

export { connectFn };

아직 해야 할 일이 있다.이 때, 구성 요소가 화면에 나타날 때 아무런 오류가 없음을 관찰할 수 있지만, 증가/감소를 누르면 계수기의 값이 업데이트되지 않습니다.어셈블리의 상태가 변경될 때마다 다시 렌더링해야 하기 때문입니다.
우리는 구독 저장소를 통해 상태가 변할 때 이를 보여줄 수 있다.

import React, { Component } from 'react';
import { store } from './redux/store';

const connectFn = (mapStateToProps, mapDispatchToProps) => {
  return (WrappedComponent) => {
    return class extends Component {

      unsubscribeTheStore = null;

      componentDidMount() {
        this.unsubscribeTheStore = store.subscribe(this.handleStateChange);
      }

      componentWillUnmount() {
        this.unsubscribeTheStore();
      }

      handleStateChange = () => {
        this.forceUpdate();
      }

      render() {
        return (
          <WrappedComponent 
            {...this.props}
            {...mapStateToProps(store.getState(), this.props)}
            {...mapDispatchToProps(store.dispatch, this.props)}
          />
        );
      }
    }
  }
}

export { connectFn };

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

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

이렇게!!!우리는 자신의connect () 함수를 구축하여 Redux 상점과 통합시켰다.
의 최종 코드Github repo
희망이 유용하다
A❤️ 너무 좋아요.😊

즐거움 코드