react-redux学习记录

151 阅读1分钟

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)
//派发时调用的时同名函数