1.引入React-Redux作为React和Redux之间的桥梁。它的主要作用体现在以下两个方面：在根组件中接受Redux的Store，合理分配到需要的组件中。组件实例订阅Store中的状态变化，提示消费相应状态的组件进行更新。安装：npminstall--savereact-redux其次，使用React-Redux提供了一个重要的Provider组件和一个高级组件connect。1、providerredux是提供给react数据层的，但是数据可能会被很多组件使用，provider可以全局注入redux中提供的store。它的作用是将store保存在redux中，赋值给store中所有需要数据的子组件。用法：exportdefaultfunctionRoot(){return();}2、connectconnect可以理解为Provider消费者。您可以使用connect提供的函数进行数据采集、数据通信、状态分发等操作。调用connect高价组件后，该组件会有以下功能：1.Store中改变状态的方法可以从props获取：Store.dispatch2.如果connect有第一个参数，那么数据在redux的Storestate会被映射到当前组件的props中，子组件可以使用消费。3.当Store中的requiredstate发生变化时，会通知当前组件更新并重新渲染视图。Usage:functionconnect(mapStateToProps?,mapDispatchToProps?,mergeProps?,options?)parametermapStateToProps:对于需要使用Store中状态的业务组件，将Store中的数据映射到业务组件中，State中的状态变化Store触发业务组件中的props发生变化，业务组件对应的视图就会更新。当没有该参数时，当前业务组件不会被订阅用法：constmapStateToProps=(state)=>({number:state.number});参数mapDispatchToProps：将redux中的dispatch方法映射到业务组件的props上。constmapDispatchToProps=(dispatch)=>{return{numberAdd:()=>dispatch({type:"ADD"}),setInfo:()=>dispatch({type:"SET"})};};dispatch分别会调用reducer中type对应的operation。参数mergeProps：stateProps，state映射到props中的内容dispatchProps，dispatch映射到props中的内容。ownProps组件本身的props用法：(stateProps,dispatchProps,ownProps)=>Object一般情况下，如果没有这个参数，会进行如下合并。返回的对象可以是自定义合并规则，以及一些额外的属性。{...ownProps,...stateProps,...dispatchProps}参数options:typeisobjectinputcontext?:Object,//自定义上下文pure?:boolean,//默认为true，当为true时，除外mapStateToProps和props，其他输入或状态变化不会更新组件。areStatesEqual?:Function,//当pure为true时，比较导入store中的state值是否与之前的相等。(next:Object,prev:Object)=>booleanareOwnPropsEqual?:Function,//纯true时，比较props值是否与之前相等。(next:Object,prev:Object)=>booleanareStatePropsEqual?:Function,//当为纯true时，比较mapStateToProps之后的值是否等于之前的值。(next:Object,prev:Object)=>booleanareMergedPropsEqual?:Function,//当pure为真时，比较mergeProps之后的值是否等于before(next:Object,prev:Object)=>booleanforwardRef?:boolean,//当为true时，可以通过ref获取connect包裹的组件实例。三、示例1、新建store文件在项目目录src下新建一个ReduxStore目录（store文件夹）并新建index.js和reducer.js文件在index.js中我们新建一个Store数据存储仓库import{createStore,applyMiddleware,compose}from"redux";//引入createStore方法importreducerfrom"./reducer";conststore=createStore(reducer);//创建数据存储仓库exportdefaultstore;创建Store后，我们可以先在项目索引中创建。先在js中引入，使用Provide分发import{StrictMode}from"react";importReactDOMfrom"react-dom";//importAppfrom"./React-redux-demo/demo02";importCompAfrom"./React-redux-demo/compA”；从“./React-redux-demo/compB”导入CompB；从“react-redux”导入{Provider}；从“./store”导入商店；constApp=({/**/});{/*,*/}constrootElement=document.getElementById("root");ReactDOM.render(App,root元素);创建compA和compB子组件，并在根组件中引入，如上importReact,{useState,useEffect}from"react";import{connect}from"react-redux";functionComponentA({toCompB,compBsay}){const[CompAsay,setCompAsay]=useState("");return(我是组件A
B组件对我说：{compBsay}
我对B组件说：setCompAsay(e.target.value)}/>toCompB(CompAsay)}>OK
);}/*映射CompBsay在状态*/constCompAMapStateToProps=(state)=>({compBsay:state.info.compBsay});/*将toCompB方法映射到props*/constCompAmapDispatchToProps=(dispatch)=>({toCompB:(mes)=>{dispatch({type:"SET",payload:{compAsay:mes}});}});/*connectpackagecomponentA*/exportdefaultconnect(CompAMapStateToProps,CompAmapDispatchToProps)(ComponentA);从“react”导入{Component};从“react-redux”导入{connect};classComponentBextendsComponent{state={compBsay:“”};handleToA=()=>{this.props.dispatch({type:"SET",payload:{compBsay:this.state.compBsay}});};render(){return(
