对React-redux中connect要领的明白

2019年8月25日 226次阅读 来源: M1seRy_

关于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数据了。

<Provider store>

Props

  1. store:运用中唯一的状况store

  2. children: 运用的子组件

例子：

<Provider store={store}>
    <Router history={history}>
    <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
    </Route>
    </Router>
</Provider>

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文档。

附参考文档：

  1. Redux中文文档

  2. Redux api引见

(本身日常平凡写的一些总结，有误的处所迎接交换斧正)

    原文作者：M1seRy_
    原文地址: https://segmentfault.com/a/1190000010416732
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞