redux是什么
1、redux是一个专门用于做状态管理的js库(不是react插件库)。
2、它可以用在react,angular,vue等项目中,但基本与react配合使用。
3、作用:集中式管理react应用中多个组件共享的状态。
4、 redux只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己写
什么情况下需要使用redux
1、某个组件的状态,需要让其他组件可以随时拿到(共享)。
2、一个组件需要改变另一个组件的状态(通信)。
3、总体原则:能不用就不用,如果不用比较吃力才考虑使用。
redux目录
redux
- store.js:该文件专门用于暴露一个store对象,整个应用只有一个store对象
- reducers文件夹:本质是一个函数,接收:preState(第一次时undefined),-action,返回加工后的状态。
- index.js 根状态文件,将所有reducer文件做集中管理
- actions文件夹:专门用于创建action对象
- contant.js:该模块是用于定义action对象中type类型的常量值 ,目的只有一个:便于管理的同时防止单词写错62
方法
- subscribe:监测redux中状态的改变,如redux的状态发生了改变,就执行一次
语法:store.subscribe( ()=>{} ) - dispatch:传递action{type:’’,data:’’}
- getState:获取store的值
api
- createStore :专门用于创建redux中最为核心的store对象
- applyMiddleware :中间件,用于配合redux-thunk(插件,需要引入)支持异步
- combineReducers :当有多个状态时需要使用,可以将状态合并为一个对象
react-redux
react-redux目录
- containers 用来放置容器组件和UI组件(直接将UI组件和容器组件写入一个jsx文件即可)
概念
- UI组件:不能使用任何redux的api,只负责页面的呈现,交互等.
- 容器组件:负责和redux通信,将结果交给UI组件
api
- Provider : 无需自己给容器组件传递store,给根组件包裹一个 即可
- connect:生成一个容器组件,并暴露
//未简写 mapStateToProps(state){} mapDispatchToProps(dispatch){} connect(mapStateToProps,mapDispatchToProps)(UI组件) //mapStateToprops:映射状态,返回值是一个对象,默认接收state作为参数 //mapDispatchToProps:映射操作状态的方法,返回值是一个对象,默认接收dispatch作为参数 //[备注]:容器组件中的store是靠props传进去的,而不是在容器组件中直接介入 //[备注]:mapDispatchToProps,也可以直接是一个对象,会自动注入dispatch(所以对象的方式不用写dispatch)
// 简写 connect( state=>({key:value}),//映射状态 {key:xxxxxAction}//映射操作状态的方法 )(UI组件)
redux&react-redux书写流程
1、src中的index文件
引入Provider
引入store
包裹App
<Provider store={store}><App/></Provider>
2、store文件
引入createStore
有异步操作引入 applyMiddleware 和引入并安装插件redux-thunk
引入合并为对象的rootReducer
导出语句
export default createStore(rootReducer, applyMiddleware(thunk))
3、containers文件夹
容器组件与UI组件合并到一个文件
引入connect
引入actions中的需要用到的回调
导出
connect(映射状态---mapStateToprops(state),映射操作状态的方法--mapDispatchToProps(dispatch))(UI组件)
4、contant文件
写入需要用到的常量分别导出
5、actions文件夹
引入常量
配置对象分别导出
6、reducers文件夹
引入常量
配置函数导出
书写流程规模化
这些是固定流程的处理(只用写一次)
redux配置有些只用写一次的就直接提炼出来,每次直接拖入文件即可
react-redux:index文件引入Provider包裹
</App>
接下来就是每次加入新文件都要做的操作了
1,centant文件中添加常量
2,新增加reducer文件和action文件
3,reducers文件夹的index文件中引入心创建的reducer文件
4,containers中添加文件写入容器和UI组件(引入action文件暴露的API)
5,最后就是connect完成联动