redux与react-redux入门教程

这两天在研究redux 和react-rudex  记录一下,后续再补充:

redux:

   redux中有几个核心概念:store,state,action,reducer,dispatch,getState,subscribe

  1.  store:存储数据的仓库,该仓库返回一个新的state对象,对view进行渲染
  2.  state:初始化数据,可以有多个值
  3. action:需要变化的数据,是一个对象,必须要有两个参数type,和变化的数据data(key值可以自定义,不一定要是data),在我看来,通俗点说,action就是提供原料和加工方式
  4. reducer:是一个函数,接受两个参数,state和action,收到action传递过来的命令,对数据进行加工,返回一个新的state对象出去,通俗点讲,reduce    就是加工输出的地方
  5. dispatch:触发数据更新,接受一个action,简单点描述一下过程就是:调用dispatch()方法,告诉他把这些原料和加工方式(action)交给reducer, 再由 reducer加工输出出来
  6. getState:获取store仓库的state数据
  7. subscribe:更新视图

下面写个小实例,将上面知识串起来,加深理解:

 

ebb4ae61e0dd1ff90c28c3a7e093a6818c8.jpg

逻辑很简单,点击‘+’ ,数字加1,点击‘-’数字减1,下面看看我们如何实现

目录结构:

85dc75770b061646593f81881d4261acce1.jpg

入口:

bc517668e1772a49702bbc0f343f60d8477.jpg

store:

92b6d480dba91253dbeb8688fe5bcf95e97.jpg

action:

82300221473a34930fd859f25b50011331d.jpg

reducer:

e6658f58eef01bfb03b45c1c1b2ccf00b04.jpg

组件代码及业务逻辑

cc5c719fb6573251e58fe9bf450f94eedb5.jpg

 

不知大家发现没有,redux和react建立连接是通过props传值的方式,这样的话redux与react耦合度太高了,所以引出react-redux

在React-redux中有两个比较关键的概念:Provider和connect方法。

一般我们都将顶层组件包裹在Provider组件之中,这样的话,所有组件就都可以在react-redux的控制之下了,但是store必须作为参数放到Provider组件中去

connect方法:

  1.     connect(mapStateToProps, mapDispatchToProps)(MyComponent)
  •  mapStateToProps : 字面含义是把state映射到props中去,意思就是把Redux中的数据映射到React中的props中去。        
  •  mapDispatchToProps : 就是把各种dispatch也变成了props让你可以直接使用

 

下面我们基于react-redux来改造一下之前的例子,忘记说了,这是react的一个插件,要先安装  npm install react-redux -S

ae19b47e7d655f919ef03af7119d485feee.jpg

61adccac050256dad20b99081c6daab0879.jpg

转载于:https://my.oschina.net/u/3964830/blog/2990879

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值