对React-redux中connect要领的明白

关于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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞