6.react-redux

安装

$ yarn add react-redux

1.Provider

REACT-REDUX提供的祖先组件，目的是把REDUX容器中的STORE放置到上下文中，供后代组件直接的调取使用

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Vote from './Vote';
import store from './store/index';

ReactDOM.render(<Provider store={store}>
	<Vote />
</Provider>, document.getElementById('root'));

.connect

connect：REACT-REDUX中的高阶组件，经过这个方法

=> 语法： connect(mapStateToProps, mapDispatchToProps)(Vote);

• 我们可以把REDUX容器中的STATE和ACTION都当做属性赋值给某个组件(Vote)
• 帮助我们给REDUX容器的事件池中添加一个“公共状态改变能够重新渲染组件的”事件方法
• 返回结果是一个代理组件，而页面中渲染的是这个代理组件

function mapStateToProps(state) {
	//=>获取的就是REDUX容器中的状态
	//=>返回一个对象，对象中的状态信息就是当做属性挂载到组件的属性上的
	return {
		...state.vote
	};
}
function mapDispatchToProps(dispatch) {
	//=>dispatch===store.dispatch
	//=>this.props.changeSupNum() 就可以完成任务派发了
	return {
		changeSupNum() {
			dispatch(actions.vote.changeSupNum());
		}
	}
}

export default connet(mapStateToProps,mapDispatchToProps)(Vote);
<!--export default connet(state=>state.vote,actions.vote)(Vote);-->

应用：

import React from 'react';
import { connect } from 'react-redux';
import actions from './store/actions/index';
import PropTypes from 'prop-types';

const VoteContent = connect(state => state.vote)(function (props) {
	let { supNum, oppNum } = props;
	return <>
		<p>支持能：{supNum}</p>
		<p>支持不能：{oppNum}</p>
	</>;
});

const VoteButton = connect(null, actions.vote)(function (props) {
	let { changeSupNum, changeOppNum } = props;
	return <>
		<button onClick={changeSupNum}>能</button>
		<button onClick={changeOppNum}>不能</button>
	</>;
});

class Vote extends React.Component {
	render() {
		let { supNum, oppNum } = this.props;
		return <div>
			<h3>今天天气好的很呢！ <span>N:{supNum + oppNum}</span></h3>
			<VoteContent />
			<VoteButton />
		</div>;
	}
}
export default connect(state => state.vote)(Vote);