对React-redux中connect方法的理解

Bryan 发布于2019-08-20 18:25 / 2251人阅读

摘要：应用中唯一的状态应用的子组件例子方法来看下函数到底是如何将和组件联系在一起的，注意到文档中有这样的一句话并不会改变它连接的组件，而是提供一个经过包裹的组件。

关于React-redux

Redux是React全家桶的重要一员，之前在知乎上也看到类似的提问：该如何通俗易懂的理解Redux?
Redux是JavaScript的状态容器，Redux的概念简单明了：

1. 应用中所有的状态都是以一个对象树的形式存储在一个单一的store中；
2. 当你想要改变应用的中的状态时，你就要dispatch一个action,这也是唯一的改变state的方法；
3. 通过编写reducer来维护状态，返回新的state,不直接修改原来数据；

为什么会有Redux

在React中，数据的传递主要采用state和props，props得由父级分发下来，而state是组件中可自行管理的状态，这意味着React并没有让数据回溯的能力，数据只能单向向下分发，或者自行内部处理，举一个简单的例子，父组件可以使用props向子组件传递数据，子组件可以通过触发回调函数来改变父组件的状态，如果是那种没有嵌套关系的组件，该如何来实现通信呢？为了解决这个问题,Redux的方法就是将store放在根目录顶层组件中，一层层往下分发给各子组件,在子组件中进行调用，Redux的作用是让状态变得更加可预测、并且更容易管理。

Redux由Flux框架演变而来，但在Flux的基础上Redux改变了整个框架中某些角色的作用，例如在Flux中你可以拥有多个store，每个store存储自己对应的那部分状态,在Redux中，你只能维护一个store,存储了整个应用的所有状态，Redux更倾向于把store分发下去，dispatch action的时候，reducer根据状态对象的key值再将store进行拆分，reducer能拿到store中对应的那一部分进行处理，Redux提供createStore、combineReducers、applyMiddleware等一系列方法来配合React-redux使用帮我们更好的对这个store进行管理，这里要详讲的是React-redux中的connect方法。

Store与视图层的绑定 Provider组件

想要把store绑定在视图层上，得用到React-redux中的两个主角:Provider和Connect，在api文档第一段话,作者说通常情况下你无法使用connect()去connect一个没有继承Provider的组件，也就是说如果你想在某个子组件中使用Redux维护的store数据，它必须是包裹在Provider中并且被connect过的组件，Provider的作用类似于提供一个大容器，将组件和Redux进行关联，在这个基础上，connect再进行store的传递。

Provider组件源码：

export function createProvider(storeKey = "store", subKey) {
......
class Provider extends Component {
    getChildContext() {
        return { [storeKey]: this[storeKey], [subscriptionKey]: null }
    }
    constructor(props, context) {
        super(props, context)
        this[storeKey] = props.store;
    }

    render() {
        return Children.only(this.props.children)
    }
}
}

从源码中可以看到，作者用了React的Context,Context解决了一个React中很常见的问题：当你的组件嵌套越来越深的时候，context能让你父组件和其它里层组件之间的通信变的更方便，createProvider方法将返回一个Provider组件，该组件接受store和子组件，在Provider中定义了getChildContext方法来传递store，那么在子组件中利用contextTypes，你就能利用context访问到父级组件传递的store数据了。

Props

store:应用中唯一的状态store

children: 应用的子组件

例子：

connect方法

来看下connect函数到底是如何将store和组件联系在一起的，注意到api文档中有这样的一句话:

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

connenct并不会改变它“连接”的组件，而是提供一个经过包裹的connect组件。 conenct接受4个参数，分别是mapStateToProps，mapDispatchToProps，mergeProps，options(使用时注意参数位置顺序)。

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

mapStateToProps(state, ownProps) 方法允许我们将store中的数据作为props绑定到组件中，只要store更新了就会调用mapStateToProps方法，mapStateToProps返回的结果必须是object对象，该对象中的值将会更新到组件中，例子：

const mapStateToProps = (state) => {
    return ({
        count: state.counter.count
    })
}

mapDispatchToProps(dispatch, [ownProps]) 第二个参数允许我们将action作为props绑定到组件中，mapDispatchToProps希望你返回包含对应action的object对象，例如：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)

当你想对组件的render更新进行更好的控制的时候，它也支持返回function方法，具体可以点击#279查看，例子：

const mapDispatchToProps = {
    // increment: () => increment(1),
    increase, // import increase function from action
    decrease 
}

mergeProps(stateProps, dispatchProps, ownProps) 该参数非必须，redux默认会帮你把更新维护一个新的props对象，类似调用Object.assign({}, ownProps, stateProps, dispatchProps)。

而options是为了更好的定制化设置的一个参数，允许返回5个boolean、function的值，我平时基本上没有接触到，想了解的可以参考api文档。

附参考文档：

Redux中文文档

Redux api介绍

(自己平时写的一些总结，有误的地方欢迎交流指正)

idc机房托管专线服务对python的理解谈谈对php的理解对人工智能的理解对云服务器的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84473.html

快速理解react-redux

摘要：和的结合简述相信很多前端开发者都听说或使用过，我曾写过一篇关于快速理解的文章，虽说是快速理解，但实际上更应该叫做复习吧。它通过高阶函数，纯函数使我们在编写组件时完全不用接触相关内容，只通过将组件和数据连接起来即可。 react-redux react和redux的结合简述相信很多前端开发者都听说或使用过react-redux，我曾写过一篇关于快速理解redux的文章，虽说是快...

MoAir 2019-08-23 14:11 评论0 收藏0
带着问题看 react-redux 源码实现

摘要：更新类型及具体内容负责更新数据的具体逻辑。即根据当前及携带的信息合成新的数据。下面带着这些问题深入了解本质上也是高阶组件的一种实现。核心实现声明以被子组件获取。通过的实现，我们可以得到的重要性浅比较的实现由此可以看到的重要性。前言 Redux作为通用的状态管理器，可以搭配任意界面框架。所以并搭配react使用的话就要借助redux官方提供的React绑定库react-redux，以高效灵活的...

JellyBool 2019-05-22 18:00 评论0 收藏0
对redux和react-redux的理解和总结（一）

摘要：使得在变化和异步中可预测。它是数据的唯一来源。指定了应用状态的变化如何响应并发送到的，只是描述了有事情发生了这一事实，并没有描述应用如何更新。更新的函数称为，它是一个纯函数，接受旧的和，返回新的。是和之间的桥梁，是把它们联系到一起的对象。为什么使用redux 随着前端单页面开发越来越复杂，javascript需要管理越来越多的状态state。如果一个model的变化引起另一个mode...

skinner 2019-08-22 18:19 评论0 收藏0
手挽手带你学React：四档（下篇）一步一步学会react-redux

摘要：手挽手带你学入门四档用人话教你，理解架构，以及运用在中。学完这一章，你就可以开始自己的项目了。结合搭建基础环境我们上一章讲过了的原理，内部是有一个的，只有才可以控制它变化。手挽手带你学React入门四档,用人话教你react-redux，理解redux架构，以及运用在react中。学完这一章，你就可以开始自己的react项目了。视频教程上一篇我们自己实现了Redux，这一篇我们来...

FullStackDeveloper 2019-08-23 15:11 评论0 收藏0
【React进阶系列】手写实现react-redux api

简介：简单实现react-redux基础api react-redux api回顾把store放在context里，所有子组件可以直接拿到store数据使组件层级中的 connect() 方法都能够获得 Redux store 根组件应该嵌套在中 ReactDOM.render( , rootEl ) ReactDOM.render( ...

刘玉平 2019-08-23 12:28 评论0 收藏0