react-redux

1、原理图

用react-redux的话必须要向redux一样更新需要在最外层订阅，它不需要订阅会自动更新

npm install redux

npm install redux-thunk 

npm install redux-devtools-extension

安装：npm install react-redux

 2、容器组件

首先，假设我希望在Count这个UI组件中用到一个redux的对象count，是不能直接使用的。需要在Count这个UI组件外包裹一个容器组件Count，容器组件才能操作state里面的数据和发布action，然后Count的容器组件通过props把state的数据和改变数据的方法也就是action传给UI组件。

那么首先要知道，怎么把Count的UI组件和Count的容器组件连接起来：

• 引入connect用于连接UI组件与redux

                import {connect} from 'react-redux'

• 使用connect()()创建并暴露一个Count的容器组件

1. connect(mapStateToProps,mapDispatchToProps)(UI组件)
2. 第一个参数接收一个函数（mapStateToProps）传递状态和一个函数传递（mapDispatchToProps）操作状态的方法
3. 第二个参数接收连接的UI组件

//引入Count的UI组件
import CountUI from '../../components/Count'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

/* 
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
	return {count:state}
}

/* 
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

3、UI组件

4、整合UI组件和容器组件 

想上面那样分开写UI组件和容器组件太麻烦了，一般都一起写：

 store存储多个变量：

reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer

 5、react-redux开发者工具的使用

      (1) npm install redux-devtools-extension

      (2).store中进行配置

          import {composeWithDevTools} from 'redux-devtools-extension'

          const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili