redux&react-redux

简介: redux是一个专门用于做状态管理的js库(不是react插件库)。

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完成联动


相关文章
|
12天前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
26 0
|
11天前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
25 3
|
22天前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
23天前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
23天前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
25天前
|
存储 JavaScript 前端开发
|
25天前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
27 1
|
3月前
|
存储 JavaScript 前端开发
React中使用redux
React中使用redux
133 56
|
19天前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
14 0
|
3月前
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
25 4