1.使用公共状态时,特别麻烦。 2.状态更新后,需要订阅重新渲染组件的方式
1.创建条件:
// provider react-redux提供的祖先组件,目的是把REDUX中的store放置到上下文当中
// 供后代组件直接调用
import {provider} from 'react-redux';
import store from './store/index'
render() {
<provider sotre={store}>
<Vote />
</provider>
}
2.使用
//connect 是高阶组件,作用是把store中的state和ACTION都当作属性传给给绑定的组件,
// 返回的结果是一个代理组件,渲染的时候就是这个代理组件 ,并且在状态更新后不需要再去订阅函数,手动去重新渲染组件,而是帮我们完成状态更新后自动重新渲染组件
//帮助我们给REDUX容器的事件池中添加一个“公共状态改变能重新渲染组件的”事件方式
import {connect} from 'react-redux'
import Vote from './Vote'
//function mapStateToProps(state) {
//获取的就是REDUX中的状态
// return state;
// 返回一个对象,对象中的状态信息就是当作属性挂在到组件属性上的
//return {
//...state.Vote
//}
//}
//要在Vote组件上拿到公共状态时,直接可以通过this.props.XXX拿到
// function mapDispatchToProps(dispacth){
// // dispacth === store.dispacth
// return {
// //this.props.changeSup就可以完成任务派发了
// changeSup() {
// dispacth(action.vote.changeSupNum)
// }
// }
// }
//connect(mapStateToProps, mapDispatchToProps)(Vote)
//connect(mapStateToProps, action.vote)(Vote)
connect(state=>({...state.vote}),action.vote)(Vote)
//派发时调用的时同名函数