当前位置：主页 > javascript教程 >

React connect的写法总结

  • 更新时间：2020-05-08 11:22:48
  • 编辑：彭天华

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

连接 React 组件与 Redux store。

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

参数

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

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，而且这个对象会与 Redux store 绑定在一起，其中所定义的方法名将作为属性名，合并到组件的 props 中。如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象，这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起（提示：你也许会用到 Redux 的辅助函数 bindActionCreators()）。如果你省略这个 mapDispatchToProps 参数，默认情况下，dispatch 会注入到你的组件 props 中。如果指定了该回调函数中第二个参数 ownProps，该参数的值为传递到组件的 props，而且只要组件接收到新 props，mapDispatchToProps 也会被调用。

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了这个参数，mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

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

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

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

返回值

根据配置信息，返回一个注入了 state 和 action creator 的 React 组件。

第一种

最普通，最常见，delllee和官网第写法。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Button } from 'antd-mobile';
import { addGunAction , removeGunAction , removeGunAsync}from './store/actionCreators'
class App extends Component {
 render() {
  console.log();
  return (
   <div className="App">
    <p>{this.props.gun}</p>
    <Button type="ghost" size="small" inline onClick={this.props.handeladd}>+</Button>
    <Button type="ghost" size="small" inline onClick={this.props.handeljian}>-</Button>
    <Button type="ghost" size="small" inline onClick={this.props.handelmanjian}>慢-</Button>
   </div>
  );
 }
}
const mapStateToProps=(state)=>({
  gun:state.gun
})
const mapDispachToProps=(dispatch)=>({
  handeladd(){
   dispatch(addGunAction())
  },
  handeljian(){
   dispatch(removeGunAction())
  },
  handelmanjian(){
   dispatch(removeGunAsync())
  }
})
export default connect(mapStateToProps,mapDispachToProps)(App);

第二种

初次接触，感觉有点绕，不太好理解，为什么点击了，直接就派发action了？

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Button } from 'antd-mobile';
import { addGunAction , removeGunAction , removeGunAsync}from './store/actionCreators'
class App extends Component {
 render() {
  console.log();
  return (
   <div className="App">
    <p>{this.props.gun}</p>
    {/*不用像第一种那样，点击调用一个方法，方法里再派发action
    这种直接点击派发action就可以*

相关教程

  • react native实现往服务器上传网络图片详解

    下面小编就为大家带来一篇react native实现往服务器上传网络图片的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-05-08

  • webpack 2的react开发配置详解

    本篇文章主要介绍了webpack 2的react开发配置实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2019-07-29

  • React组件“外”使用父组件的Props的方法

    这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-01-22

  • 由ReactJS的Hello world说开来代码实例

    这篇文章主要介绍了ReactJS的Hello world程序编写及其相关知识,React是Facebook开发并开源的JS框架,人气在当下急剧攀升,需要的朋友可以参考下

    发布时间：2020-02-27

  • ES6语法重构React组件代码知识点

    这篇文章主要介绍了利用ES6语法重构React组件的相关资料，文中通过示例代码介绍的很详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。

    发布时间：2020-01-02

  • 详细介绍React开发必不可少的eslint配置

    本篇文章主要介绍了详解React开发必不可少的eslint配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-02-10

  • React Native全教程：移动端跨平台应用开发

    React Native全教程：移动端跨平台应用开发

    《React Native全教程：移动端跨平台应用开发》 由经验丰富的移动开发工程师精心编撰，《React Native全教程：移动端跨平台应用开发》从逻辑上可分为5个部分，循序渐进地向读者展示使用React

    大小：398 MB移动开发电子书

  • React Native移动开发实战

    React Native移动开发实战

    本书以实战开发为主旨，以React Native应用开发为主线，以iOS和Android双平台开发为副线，通过完整的电商类App项目案例，详细地介绍了React Native应用开发所涉及的知识，让读者全面、深入、透彻

    大小：146 MBReact Native电子书

  • React状态管理与同构实战

    React状态管理与同构实战

    React自开源以来，便以革命性的设计理念迅速颠覆了前端开发的传统意义，其倡导的组件化、状态管理、虚拟DOM等思想极大提高了前端开发效率。

    大小：162.5 MBReact电子书

  • React Native应用开发实例解析

    React Native应用开发实例解析

    本书主要从功能扩展和实际应用方面讲解React Native，带领读者全面了解React Native的API和组件，并且阅读本书无需React开发背景，感兴趣的可以一起来了解一下

    大小：7.7 MBRN应用开发电子书

  • React Native跨平台移动应用开发

    React Native跨平台移动应用开发

    React Native是Facebook公司最新推出的，强大的、开源的跨平台移动应用开发框架，它能大幅减少跨平台移动应用开发的工作量，并且代码结构清晰、简单易懂。同时React Native框架采用模块化结构，

    大小：70.9 MBReact Native电子书

  • 快速上手React编程

    快速上手React编程

    《快速上手React编程》面向希望快速上手React.js进行Web开发的读者，借助精心挑选和详细解释的实例，帮助读者使用现有的JavaScript和Web开发技能学习React开发。

    大小：249.2 MBReact电子书

  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

    大小：59150 MB MJS实例

  • React：引领未来的用户界面开发框架

    React：引领未来的用户界面开发框架

    本书采用全程实例介绍和剖析了 React.js 的方方面面，新版全面更新示例，用ES6重写代码，摒弃社区弃用范式，新增无状态组件、不可变数据、Redux 等热点内容，适合广大前端开发者、设计人员

    大小：1.9 MBReact电子书

  • React与Redux开发实例精解

    React与Redux开发实例精解

    React与Redux开发实例精解 共分四部分，全面介绍如何使用React 与Redux 进行Web 开发。第一部分是基础篇，介绍React 与Redux 的基础知识；第二部分是进阶篇，通过精彩的官方示例学习React 与Redux；第

    大小：101.4 MBReact电子书

  • 深入React技术栈

    深入React技术栈

    深入React技术栈 从几个维度去介绍 React。一是作为 View 库，它怎么实现组件化，以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品 Redux，它们怎么与 React 结合做应用开发。三是

    大小：9.6 MBReact电子书

用户留言

发布评论

最新更新

热门推荐