JavaScript 기술에서 React-redux의 connect() 메소드에 대한 자세한 분석

connect()는 React-redux의 핵심 메소드 중 하나입니다. redux에서 실제로 React 구성요소와 저장소를 연결합니다. 다음 글에서는 주로 React-Redux의 connect() 메소드를 소개합니다. 세부 사항이 있으며 모든 사람을 위한 특정 참조 및 학습 가치가 있습니다. 필요한 친구는 아래를 살펴볼 수 있습니다.

Components

React-Redux는 모든 구성 요소를 디스플레이 구성 요소(UI 구성 요소), 컨테이너 구성 요소의 두 가지 주요 범주로 나눕니다.

디스플레이 구성 요소는 다음과 같은 특성을 갖습니다.

• UI만 담당합니다.

  state
가 없는 모든 비즈니스 로직

• (예: this.state이 변수this.state这个变量）

• 所有数据都由参数（this.props）提供

• 不使用任何 Redux 的 API
  

容器组件有以下几个特征：

• 负责管理数据和业务逻辑，不负责 UI 的呈现

• 带有内部状态

• 使用 Redux 的 API

总结为一点： 展示组件负责 UI 的呈现，容器组件负责管理数据和逻辑

connect方法解析

下图是connect()的概念图

可以简单归纳为以下几点：

• mapStateToProps必须是function,作为输入逻辑，

• mapDispatchToProps可以是funciton,也可以是对象，作为输出，
  

connect（）签名

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

连接 React 组件与 Redux store。

连接操作不会改变原来的组件类，反而返回一个新的已与 Redux store 连接的组件类。

参数

1、 [mapStateToProps(state, [ownProps]): stateProps] (Function) : 如果定义该参数，组件将会监听 Redux store 的变化。任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。如果你省略了这个参数，你的组件将不会监听 Redux store。如果指定了该回调函数中的第二个参数 ownProps，则该参数的值为传递到组件的 props，而且只要组件接收到新的 props，mapStateToProps 也会被调用。

2、 [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (<a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a> or Function) : 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，而且这个对象会与 Redux store 绑定在一起，其中所定义的方法名将作为属性名，合并到组件的 props 中。如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象，这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起（提示：你也许会用到 Redux 的辅助函数 bindActionCreators() )

🎜🎜🎜모든 데이터는 매개변수(this.props)에 의해 제공됩니다.🎜🎜🎜🎜Redux를 사용하지 않음 API🎜
🎜🎜🎜🎜컨테이너 구성 요소에는 다음과 같은 특징이 있습니다. 🎜🎜🎜🎜🎜 데이터 및 UI 표시를 담당하지 않는 비즈니스 로직🎜🎜🎜🎜내부 상태 포함🎜🎜🎜🎜Redux API 사용🎜🎜🎜요약하자면: 디스플레이 구성 요소는 UI 표시를 담당하고 컨테이너 구성 요소는 UI 표시를 담당합니다. 관리용 데이터 및 로직🎜🎜🎜🎜connect 메소드 분석🎜🎜🎜🎜아래 그림은 connect()의 개념도입니다🎜

🎜🎜🎜 다음 사항으로 간단히 요약할 수 있습니다. 🎜 🎜🎜🎜🎜map🎜StateToP🎜rops는 입력 논리로서 기능해야 하며, 🎜🎜🎜🎜mapDispatchToProps는 funciton이거나 객체 🎜, 출력
🎜🎜🎜🎜🎜connect() 서명 🎜🎜🎜🎜connect([mapStateToProps], [mapDispatchToProps], [ mergeProps], [옵션])🎜🎜React 구성 요소와 Redux 스토어를 연결합니다. 🎜🎜연결 작업은 원래 구성 요소 클래스를 변경하지 않지만 Redux 저장소에 연결된 새 구성 요소 클래스를 반환합니다. 🎜🎜🎜🎜Parameters🎜🎜🎜🎜1. [mapStateToProps(state, [ownProps]): stateProps] (Function): 이 매개변수가 정의되면 구성 요소는 Redux 저장소의 변경 사항을 수신합니다. . Redux 저장소가 변경될 때마다 mapStateToProps 함수 🎜가 호출됩니다. 콜백 함수 🎜는 구성요소의 소품과 병합될 순수 객체를 반환해야 합니다. 이 매개변수를 생략하면 구성 요소가 Redux 저장소를 수신하지 않습니다. 콜백 함수에 두 번째 매개변수 ownProps를 지정하면 이 매개변수의 값은 컴포넌트에 전달된 props가 되며, 컴포넌트가 새로운 props를 받을 때마다 mapStateToProps도 호출됩니다. 🎜🎜2. [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (<a href="http://www.php.cn/wiki/60.html" target="_blank">Object🎜 또는 함수) </a>: 객체가 전달되면 객체에 정의된 각 함수는 Redux action🎜 작성자이며 이 개체는 Redux 저장소에 바인딩되며 여기에 정의된 메서드 이름은 속성 🎜이름이 구성요소의 소품에 병합됩니다. 함수를 전달하면 함수는 디스패치 함수를 받게 되며, 디스패치 함수를 통해 액션 생성자에 바인딩된 객체를 반환하는 방법을 결정하는 것은 사용자에게 달려 있습니다(힌트: Redux 보조 함수 bindActionCreators() ). mapDispatchToProps 매개변수를 생략하면 기본적으로 디스패치가 구성 요소 소품에 주입됩니다. 콜백 함수에 두 번째 매개변수 ownProps를 지정하면 이 매개변수의 값은 컴포넌트에 전달된 props가 되며, 컴포넌트가 새로운 props를 받을 때마다 mapDispatchToProps도 호출됩니다. 🎜

3. [mergeProps(stateProps, dispatchProps, ownProps): props] (함수): 이 매개변수를 지정하면 mapStateToProps() 및 mapDispatchToProps()의 실행 결과와 컴포넌트 자체의 props가 표시됩니다. 이 콜백 함수로 전달됩니다. 이 콜백 함수에 의해 반환된 개체는 래핑된 구성 요소에 props로 전달됩니다. 이 콜백 함수를 사용하여 구성 요소의 prop을 기반으로 상태 데이터의 일부를 필터링하거나 prop의 특정 변수를 액션 생성자에 바인딩할 수 있습니다. 이 매개변수를 생략하면 기본적으로 Object.sign({}, ownProps, stateProps, dispatchProps)의 결과가 반환됩니다. [mergeProps(stateProps, dispatchProps, ownProps): props] (Function) : 如果指定了这个参数，mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

4、 [options] (Object)  如果指定这个参数，可以定制 connector 的行为。

[pure = true] (Boolean) : 如果为 true，connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果，避免不必要的更新，前提是当前组件是一个“纯”组件，它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true。

[withRef = false] (Boolean) : 如果为 true，connector 会保存一个对被包装组件实例的引用，该引用通过 getWrappedInstance()

4. [옵션] (객체) 이 매개변수를 지정하면 커넥터의 행동

. [pure = true] (부울) : true인 경우 커넥터는 shouldComponentUpdate

하고 mergeProps의 결과를 가볍게 비교하여 불필요한 update

를 방지하세요. 전제는 현재 구성 요소가 입력이나 상태에 의존하지 않고 props와 Redux 저장소의 상태에만 의존하는 "순수한" 구성 요소라는 것입니다. 기본값은 true입니다.

[withRef = false] (부울) : true인 경우 커넥터는 참조 는 getWrappedInstance() 메서드를 통해 획득됩니다. 기본값은 false

반환값

구성 정보에 따라 상태 및 액션 생성자가 주입된 React 컴포넌트를 반환합니다.

컨테이너 컴포넌트는 connect() 메소드를 사용하여 Redux에 연결합니다

react-redux에서 제공하는 connect() 메소드를 사용하여 "clumsy"

Count

er를 컨테이너 컴포넌트로 변환합니다. connect()를 사용하면 Redux 저장소에서 가져오려는 구성 요소에 대한 정확한 상태를 지정할 수 있습니다. 이를 통해 모든 세분성 수준의 데이터를 얻을 수 있습니다.

보죠, props를 통해 값이 전달되는 디스플레이 구성 요소와 "Increment"

버튼을 클릭하면 호출되는 onIncrement 함수가 있습니다.

:

import { Component } from 'react';

export default class Counter extends Component {
 render() {
 return (
  <button onClick={this.props.onIncrement}>
  {this.props.value}
  </button>
 );
 }
}

containers/CounterContainer.js

🎜🎜

import { Component } from 'react';
import { connect } from 'react-redux';

import Counter from '../components/Counter';
import { increment } from '../actionsCreators';

// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？
function mapStateToProps(state) {
 return {
 value: state.counter
 };
}

// 哪些 action 创建函数是我们想要通过 props 获取的？
function mapDispatchToProps(dispatch) {
 return {
 onIncrement: () => dispatch(increment())
 };
}

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

🎜🎜🎜Summary🎜🎜🎜🎜connect 후 두 번째 괄호는 prop이 추가될 React 컴포넌트이고, 첫 번째 괄호의 매개변수는 해당 컴포넌트의 Prop을 변경하는 데 사용되는 메서드입니다. 첫 번째 대괄호에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 객체를 반환하는 함수입니다. 객체의 키는 구성 요소의 prop 속성이고 값은 객체를 반환하는 함수입니다. 객체의 키는 prop의 속성 이름이기도 하며 값은 redux 디스패치입니다. 이 prop 속성을 사용하여 트리거하면 디스패치가 redux의 상태 값을 변경합니다. 🎜

위 내용은 JavaScript 기술에서 React-redux의 connect() 메소드에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!