mapStateToProps,mapDispatchToProps的使用详解
2018-03-01 17:30
639 查看
前言
刚接触redux的时候,发现大家对mapDispatchToProps使用有几种方法,而且都跑通了,本文来介绍下,redux的mapStateToProps,mapDispatchToProps的一些使用方式。
mapStateToProps(state, ownProps)
mapStateToProps是一个函数,用于建立组件跟 store 的 state 的映射关系
作为一个函数,它可以传入两个参数,结果一定要返回一个 object
传入mapStateToProps之后,会订阅store的状态改变,在每次 store 的 state 发生变化的时候,都会被调用
ownProps代表组件本身的props,如果写了第二个参数ownProps,那么当prop发生变化的时候,mapStateToProps也会被调用。例如,当 props接收到来自父组件一个小小的改动,那么你所使用的 ownProps 参数,mapStateToProps 都会被重新计算)。
mapStateToProps可以不传,如果不传,组件不会监听store的变化,也就是说Store的更新不会引起UI的更新
example:
传入了props的:
mapDispatchToProps
mapDispatchToProps用于建立组件跟
如果mapDispatchToProps是一个函数,它可以传入dispatch,ownProps, 定义UI组件如何发出action,实际上就是要调用dispatch这个方法
调用actions.increase()只能得到一个 action对象
而前面介绍bindActionCreator的时候介绍过,可以直接将action包装成可以被调用的函数。
所以借助bindActionCreator, 上面的mapDispatchToProps可以变成
如果mapDispatchToProps是一个函数, 并且传入ownProps, 当组件获取新的props的时候,mapDispatchToProps也会被调用.
传入一个object,其中这个object所对应的value必须是actionCreator,这样redux里面会自动帮我们调用bindActionCreator,所以上面又可以变成
不传的时候,React-Redux会自动将dispatch注入组件的props。
刚接触redux的时候,发现大家对mapDispatchToProps使用有几种方法,而且都跑通了,本文来介绍下,redux的mapStateToProps,mapDispatchToProps的一些使用方式。
mapStateToProps(state, ownProps)
mapStateToProps是一个函数,用于建立组件跟 store 的 state 的映射关系
作为一个函数,它可以传入两个参数,结果一定要返回一个 object
传入mapStateToProps之后,会订阅store的状态改变,在每次 store 的 state 发生变化的时候,都会被调用
ownProps代表组件本身的props,如果写了第二个参数ownProps,那么当prop发生变化的时候,mapStateToProps也会被调用。例如,当 props接收到来自父组件一个小小的改动,那么你所使用的 ownProps 参数,mapStateToProps 都会被重新计算)。
mapStateToProps可以不传,如果不传,组件不会监听store的变化,也就是说Store的更新不会引起UI的更新
example:
const mapStateToProps = (state) => { return { todoList: state.todoList } }
传入了props的:
const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.visibilityFilter } }
mapDispatchToProps
mapDispatchToProps用于建立组件跟
store.dispatch的映射关系,可以是一个object,也可以传入函数
如果mapDispatchToProps是一个函数,它可以传入dispatch,ownProps, 定义UI组件如何发出action,实际上就是要调用dispatch这个方法
/* 假设actions是一个import进来的值为actionCreator的object */ action.increase = function (info) { return { { type:'INCREASE', info } } } const mapDispatchToProps = (dispatch, ownProps) => { return { increase: (...args) => dispatch(actions.increase(...args)), decrease: (...args) => dispatch(actions.decrease(...args)) } }
调用actions.increase()只能得到一个 action对象
{type:'INCREASE'},要触发这个 action 必须 在store 上调用 dispatch 方法。 diapatch正是 mapDispatchToProps的第一个参数。但是,为了不让 组件感知到 dispatch 的存在,我们需要将increase 和 decrease 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 dispatch )。
而前面介绍bindActionCreator的时候介绍过,可以直接将action包装成可以被调用的函数。
所以借助bindActionCreator, 上面的mapDispatchToProps可以变成
import {bindActionCreators} from 'redux'; const mapDispatchToProps = { } = (dispatch, ownProps) => { return bindActionCreators({ increase: action.increase, decrease: action.decrease }, dispatch); } /* 返回跟上面一样的object */ { increase: (...args) => dispatch(action.increase(...args)), decrease: (...args) => dispatch(action.decrease(...args)), }
如果mapDispatchToProps是一个函数, 并且传入ownProps, 当组件获取新的props的时候,mapDispatchToProps也会被调用.
传入一个object,其中这个object所对应的value必须是actionCreator,这样redux里面会自动帮我们调用bindActionCreator,所以上面又可以变成
const mapDispatchToProps = { ...action }
不传的时候,React-Redux会自动将dispatch注入组件的props。
相关文章推荐
- [置顶] React和Redux 之间的依赖注入connect(mapStateToProps、mapDispatchToProps)
- React依赖注入说明(mapStateToProps/mapDispatchToProps)
- connect中的mapStateToProps该怎么写
- [Redux] Using mapDispatchToProps() Shorthand Notation
- mapStateToProps
- Google Sitemap Generator 安装使用详解
- Google Map API使用详解(如何在自己的网页中嵌入地图)
- Google Map API使用详解(一)——Google Map开发背景知识
- Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- Google Map API使用详解(五)——Google Map基本常识(下)
- Google Map API使用详解(九)——Google Map坐标系统总结(下)
- Google Map API使用详解(二)——Google Map API中文说明
- Google Map API使用详解(七)——加载Google Map API URL的详细解读
- Google Map API使用详解(十三)——使用Google Map API实现自定义控件
- Google Map API使用详解(十四)——使用Google Map提供的默认控件
- Google Map API使用详解(十六)——使用GMapOptions定制你的Google Map
- MultiByteToWideChar和WideCharToMultiByte的正确使用方法及参数详解
- MultiByteToWideChar和WideCharToMultiByte使用方法详解
- Google Map API使用详解(六)——Google Map API Key的解读和使用技巧
- 热区map的使用详解(初级)