react-redux的connect用法详解
作者:一杯清泉
一、UI组件和容器组件
React-Redux 将所有组件分成两大类:UI 组件和容器组件。
- UI 组件:只负责 UI 的呈现,不带有任何业务逻辑,没有状态state值的使用,所以的参数是通过this.props获取。
- 容器组件:负责管理数据和业务逻辑,不负责 UI 的呈现,有业务逻辑,并且使用Redux提供的API。
对于上面的AppUI就是一UI组件,App就是一个容器组件。
二、connect
React-Redux提供connect方法,用于从 UI 组件生成容器组件。connect的意思,就是将这两种组件连起来。
1、导入
import { connect } from 'react-redux'
2、使用
export default connect(mapStateToProps, mapDispatchToProps)(AppUI);
connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会订阅Store,就是说 Store 的更新不会引起 UI 组件的更新。
- mapStateToProps:更新props————>作为输入源。返回一个对象,key为UI界面对应的名称,value为state处理的结果
- mapDispatchToProps:更新action————>作为输出源。触发action更新reducer,进而更新state,从而驱动参数1变化,引起UI数据的变化
通过这个两参数的自动调用方式,将UI和业务逻辑分开,UI组件通过props显示,没有任何业务逻辑,容器组件负责逻辑业务。下面详解这两个参数
三、mapStateToProps
建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。作为函数,mapStateToProps执行后应该返回一个对象,里面的每一个键值对就是一个映射。
mapStateToProps会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。
mapStateToProps的第一个参数总是state对象,还可以使用第二个参数,代表容器组件的props对象。使用ownProps作为参数后,如果容器组件的参数发生变化,也会引发 UI 组件重新渲染。
下面以加减数字为例说明:
<div> <button style={{width: 40, height: 40}} onClick={onIncreaseClick}>+</button> <text style={{padding: 40}}>{value}</text> <button style={{width: 40, height: 40}} onClick={onReduceClick}>-</button> </div>
1、一个参数
const mapStateToProps = (state) => { return { value: state.count //UI组件中需要什么参数,对象中就写哪些参数 } }
2、两个参数
const mapStateToProps = (state, ownProps) => { return { value: state.count //UI组件中需要什么参数,对象中就写哪些参数 } }
四、mapDispatchToProps
mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。
1、作为函数
如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。作为函数,应该返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action。
dispach(action)发出消息。
const mapDispatchToProps = (dispatch, ownProps) => { return { onIncreaseClick: () => dispatch({type: 'increase'}), onReduceClick: () => dispatch({type: 'reduce'}) } }
2、作为对象
const mapDispatchToProps = { onIncreaseClick: () => ({type: 'increase'}), onReduceClick: () => ({type: 'reduce'}) };
const mapDispatchToProps = (dispatch) => ({ onIncreaseClick() { dispatch({type: 'increase'}) }, onReduceClick() { dispatch({type: 'reduce'}) } })
这两个使用的效果一样。通过connect,store.subscribe也不需要了。通过connnect方法,最终的代码:
import React, {Component} from 'react' import {connect} from "react-redux"; class App extends Component { render() { const {value, onIncreaseClick, onReduceClick} = this.props return ( <div> <button style={{width: 40, height: 40}} onClick={onIncreaseClick}>+</button> <text style={{padding: 40}}>{value}</text> <button style={{width: 40, height: 40}} onClick={onReduceClick}>-</button> </div> ); } } const mapStateToProps = (state) => { return { value: state.count } } const mapDispatchToProps = (dispatch, ownProps) => { return { onIncreaseClick: () => dispatch({type: 'increase'}), onReduceClick: () => dispatch({type: 'reduce'}) } } export default connect(mapStateToProps, mapDispatchToProps)(App);
五、Provider
1、导入
import {Provider} from "react-redux";
2、使用
Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了
<Provider store={store}> <App/> </Provider>
效果如下:http://localhost:3000/
到此这篇关于react-redux的connect用法详解的文章就介绍到这了,更多相关react-redux的connect用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!