一、react-redux的介绍
1.1、React-Redux是React和Redux之间的官方绑定库，它提供了将Redux Store状态映射到React组件属性的功能，并使用Provider组件来让组件树中所有后代组件都能够获取该Store。
通过模型图我们可以知道，UI组件是不和redux有没有任何联系的，
真正与redux打交道的是UI组件对应的容器组件，
所有为了简化文件复杂度，我们可以把UI组件和容器组件定义在同一个文件中，
把容器组件暴露出去即可。
二、react-redux的使用
2.1、react-redux的安装
npm install react-redux
2.2、创建相应的文件
2.2.1、既然要实现数据共享，那么肯定要两个组件，每个组件都要创建对应的
action文件，reducers文件。可以去参考上一篇文章
2.2.2、如何把UI组件和容器组件定义在同一个文件中(实例)
import React, {
Component } from 'react'
import {
creDecAction, creIncAction } from '../../redux/actions/count'
//引入 connect用于连接UI组件与redux
import {
connect} from 'react-redux'
class Count extends Component {
//加法
increment = ()=>{
const {
value} = this.selectNumber
this.props.jia(value*1);
}
//减法
decrement = ()=>{
const {
value} = this.selectNumber
this.props.jian(value*1);
}
//奇数再加
incrementIfOdd = ()=>{
const {
value} = this.selectNumber
this.props.jia(value*1);
}
//异步加
incrementAsync = ()=>{
const {
value} = this.selectNumber
this.props.jia(value*1);
}
render() {
const {
count } = this.props
return (
<div>
<h1>我是 Count组件 ,下方组件总人数为：{
this.props.renSu} </h1>
<h3>当前求和为: {
count}</h3>
<select ref={
c=>this.selectNumber=c} >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={
this.increment}>+</button>
<button onClick={
this.decrement}>-</button>
<button onClick={
this.incrementIfOdd}>当前求和为奇数在加</button>
<button onClick={
this.incrementAsync}>异步加</button>
</div>
)
}
}
// a函数 的返回值为一个对象 作为状态传递给 UI组件
// function mapStateToPreps(state){
// return {count:state}
// }
// // a函数 的返回值作为一个对象 里面有各种方法 操作状态的方法 传递给 UI组件
// function mapDispatchToProps(dispatch){
// return {
// jia:(number)=>{
// dispatch(creIncAction(number))
// },
// jian:(number)=>{
// dispatch(creDecAction(number))
// }
// }
// }
// //创建并暴露一个 Count的容器组件
// export default connect(mapStateToPreps,mapDispatchToProps)(CountUI)
//简写方法
export default connect(
state => ({
count:state.he,
renSu:state.rens.length
}),
{
jia:creIncAction,
jian:creDecAction
}
)(Count)
2.3、实现数据互通
2.3.1、汇总所有 reducer
我们这次有两个组件的 reducer,但是在store中createStore()方法只能传入一个reducer,
这个时候我们就需要把多个reducer 汇总为一个reducer:
// combineReducers 如果要 redux 管理多个状态，请引入它
import {
createStore,applyMiddleware,combineReducers } from 'redux'
//导入 redux-thunk，用于支持异步 action
import thunk from 'redux-thunk'
import countReducer from './reducers/count'
import personReducer from './reducers/person'
//汇总所有的 reducer 变为一个总的 reducer
const allReducer = combineReducers({
he:countReducer,
rens:personReducer
})
export default createStore(allReducer,applyMiddleware(thunk))
combineReducers()方法介绍：
传入一个对象，属性名随便取，值为你要管理的状态的值
2.3.2、再入口文件index.js中/用 Provider 包裹 App
const Root = ReactDOM.createRoot(document.getElementById('root'))
Root.render(
//用 Provider 包裹 App,将 store 传递给 Provider。供App中所有容器组件使用其中的状态
<Provider store={
store}>
<App />
</Provider>
)
2.3.3、使用其他组件的状态
在暴露容器组件的位置：
export default connect(
state => ({
count:state.he,
renSu:state.rens.length
}),
{
jia:creIncAction,
jian:creDecAction
}
)(Count)
connect()方法的第一个参数为一个函数，函数会默认传入一个state
这个state身上就包含了我们使用redux管理的所有状态，根据自己的需要读取就行，
读取后会存在props中。
个人博客：余生的学习笔记