React-Redu
序Redux的作者友情赞助,封装了一个 React 专用的库 本人认为
这样以来也实现了Redux和React分离,UI组件只要书写react的代码,容器组件只负责书写redux相关操作,易于书写与维护。 react-redux主要提供了倆个关键API:Provider组件 和 connect函数。 connect()connect函数的主要功能是连接 UI组件 与 容器组件。它会自动为您的UI组件生成一个容器组件,并且创立起它们之间的通信。 const ContainerComponent = connect( mapStateToProps,mapDispatchToProps )(UIComponent); 上面代码中,UIComponent是 UI组件,containerComponent就是由 React-Redux 通过connect方法自动生成的容器组件。而 mapStateToProps(可选参数)
这个函数的主要功能是将 mapStateToProps函数返回一个对象,这个对象中的每一个键值对都会映射到UI组件的 const mapStateToProps = (state) => { return { data: state } } 上面的 mapStateToProps 函数将 mapDispatchToProps(可选参数)mapDispatchToProps可以是一个函数,也可以是一个对象。 作为函数,mapDispatchToProps 会得到 const mapDispatchToProps = ( dispatch,ownProps ) => { return { click: () => { // 可以进行dispatch操作,发出action } }; } 上面的 Provider 组件Provider 组件主要作为整个应用的容器,用来传递store给connct所生成的容器组件。 <Provider store={store}> <ContainerComponent /> </Provider> 上面代码中,Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了。 源码: class Provider extends Component { getChildContext() { return { store: this.props.store }; } render() { return this.props.children; } } Provider.childContextTypes = { store: React.PropTypes.object } 解释上面的代码之前先解释下 context 和 contextTypes,
也就是说:指定数据并要将数据传递下去的父组件要定义 所以,上面代码的意思就是: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |