安装命令
yarn add redux yarn add react-redux yarn add redux-thunk
1 redux是什么
1、redux是一个专门用于做状态管理的js库（不是react插件库）。
2、它可以用在react，angular，vue等项目中，但基本与react配合使用。
3、作用：集中式管理react应用中多个组件共享的状态。
4、 redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写
1.1 什么情况下需要使用redux
1、某个组件的状态，需要让其他组件可以随时拿到(共享)。
2、一个组件需要改变另一个组件的状态（通信）。
3、总体原则：能不用就不用，如果不用比较吃力才考虑使用。
1.2 redux的方法
subscribe：监测redux中状态的改变,如redux的状态发生了改变，就执行一次
语法：store.subscribe( ()=>{} )
取消订阅：store.subscribe( ()=>{} )()
dispatch：传递action
语法：store.dispatch({type:'',data:''})
getState：获取当前store的值
语法：store.getState()
replaceReducer(nextReducer) ： 替换 store 当前用来计算 state 的 reducer。
1.3 redux的api
createStore ：专门用于创建redux中最为核心的store对象
3个参数
1、reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
2、[preloadedState] (any): 初始时的 state。
3、enhancer (Function): Store enhancer，可选使用。可以用第三方第能力如中间价、时间旅行、持久化来增强 store
applyMiddleware ：中间件，用于配合redux-thunk(插件，需要引入)支持异步
combineReducers ：当有多个状态时需要使用，可以将状态合并为一个对象
2、react-redux
2.1 概念
UI组件:不能使用任何redux的api,只负责页面的呈现,交互等.
容器组件:负责和redux通信,将结果交给UI组件.
2.2 react-redux的api
Provider ：无需自己给容器组件传递store,给根组件包裹一个即可
语法：<Provider store={store}>
connect : 生成一个容器组件,并暴露（类组件使用）
两种用法，还有获取dispatch的方式
语法①: connect(mapStateToProps,mapDispatchToProps)(UI组件)
直接从函数的参数中就可以获取到dispatch
mapStateToProps(state)
mapStateToProps(dispatch,ownProps)
语法②：connect(mapStateToProps,null)(UI组件)
需要从UI组件的props中拿到dispath
useSelector：相当于类组件的mapStateToProps
语法 ：const state = useSelector(state=>state)
useDispatch: 相当于类组件的mapDispatchToProps
语法：
cosnt dispatch = useDispatch()
dispatch( action动作对象 )
【注意】：useDispatch()(action对象) 直接使用会报错
2.3 connect的语法
//未简写 mapStateToProps(state){} mapDispatchToProps(dispatch,ownProps){} connect(mapStateToProps,mapDispatchToProps)(UI组件) //mapStateToprops:映射状态,返回值是一个对象，默认接收state作为参数 //mapDispatchToProps:映射操作状态的方法,返回值是一个对象，默认接收dispatch,ownProps作为参数 //[备注]:容器组件中的store是靠props传进去的,而不是在容器组件中直接介入 //[备注]:mapDispatchToProps,也可以直接是一个对象，会自动注入dispatch（所以对象的方式不用写dispatch）
// 简写 connect( state=>({key:value}),//映射状态 {key:xxxxxAction}//映射操作状态的方法 )(UI组件)
3、模型图
