2.3.3.react-redux的一个简单案例

0.前提：

reudx只是单纯的对数据进行管理，数据与组件之间的交互，还需要手动地添加，所以，就有了react-redux的开始。

相关依赖已经再redux的案例中下载好了。https://blog.csdn.net/weixin_47870554/article/details/106743677

react-redux中的组件分为两类，一类是只处理数据和业务逻辑的容器，一类是只负责显示UI显示。

1.简单的demo：

代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

const reducer = (state, action) => {
	return {
		name: action.name
	};
}
const store = createStore(reducer);

function mapStateToProps(state){
	return {
		name: state.name,
	}
}
function mapDispatchToProps(dispatch){
	return {
		changeName: ()=>{
			const name = prompt('你要改什么名字啊?');
			dispatch({
				type: 'name',
				name: name
			})
		},
	}
}
class Hello extends React.Component {
	render() {
		const { changeName, name='?' } = this.props;
		return <h1 onClick={changeName}>hello, {name}</h1>
	}
}
Hello = connect(mapStateToProps, mapDispatchToProps)(Hello);

ReactDOM.render(
	<Provider store={store}>
		<Hello />
	</Provider>,
	document.body);

演示结果：

2.代码简单的解释：

之前就提过，store有初始化配置reducer函数、传递action触发reducer改变state、取出state三个步骤流程。

这个简单demo中redux相关组件，也类似这三个流程。

• 初始化配置reducer

const reducer = (state, action) => {
	return {
		name: action.name
	};
}
const store = createStore(reducer);

这里有mapStateToProps、mapDispatchToProps两个函数：

• mapDispatchToProps会传入dispatch函数作为参数，对应的是传递action触发reducer改变state这个步骤，返回的也是一个对象，对象的属性与传入react组件的props中的属性相对应；
• mapStateToProps会传入参数state，对应的是取出state，不过返回的，必须是一个对象，对象的属性与传入react组件的props中的属性相对应；

connect(mapStateToProps, mapDispatchToProps)(Hello)：实现将mapDispatchToProps、mapStateToProps与组件绑定，使得传递action的方法，和改变后的states能够作为props的属性传入组件中，对组件进行操作。然后返回一个已经和这两个函数绑定的组件。

function mapStateToProps(state){
	return {
		name: state.name,
	}
}
function mapDispatchToProps(dispatch){
	return {
		changeName: ()=>{
			const name = prompt('你要改什么名字啊?');
			dispatch({
				type: 'name',
				name: name
			})
		},
	}
}
class Hello extends React.Component {
	render() {
		const { changeName, name='?' } = this.props;
		return <h1 onClick={changeName}>hello, {name}</h1>
	}
}
Hello = connect(mapStateToProps, mapDispatchToProps)(Hello);

组件在connect前与connect后的对比：

最后，使用Provider 组件，传入store，使得绑定了connect的组件能够接收到store。实现redux数据管理。

ReactDOM.render(
	<Provider store={store}>
		<Hello />
	</Provider>,
	document.body);

（没有<Provider store={store}>的话，就会找不到store）

从这里也能看出来，react-redux是通过组件的context传达数据的。