我对redux的理解

原创 前端老菜鸟 随笔 redux 288阅读 2018-05-05 12:53:47 举报

我对redux的理解

redux是什么?
    redux是一个数据管理插件,它和vuex状态管的实现与阿尼相同,相信如果会vuex的老铁们理解redux应该不难。它是由flux演变而来的,可以说是flux是他的前身,但是随着需求的发展,redux正在由mobX发展 ,今天我就在这里讲讲我对redux的理解希望对前端感兴趣的朋友们有所帮助。

redux的使用场景

无论是移动端还是pc端,相信很多了解react的朋友都知道,react的实现是单向数据流的,也就是说只能父组件向子组件传递状态。兄弟组件之间传递状态是一个很大的问题。例如,React或者vue开发组件化的spa时:用户登陆后客户端会存储用户信息(如userId,头像等),而系统的很多组件都会用到这些信息,例如收藏,点赞,评论等。这些组件在用到用户信息时,不会再获取一边,因此没个系统都需要一个管理多组件使用的公共信息的功能,这就是Redux的作用。

用到redux时首先要下载redux依赖包

安装redux依赖 npm install redux --save npm install react-redux --save

废话不多说接下来仔细讨论一下redux的用法

redux:是用来只是用户的具体行为的,就是具体知名用户要干什么
reducer:是用来吧action和state--对应的,也就是用户做熟了什么只是,state就要做出相对应的改变
store:用于存储reducer中的数据信息,他包含了完整的reducer
dispatch:用于监听事件,派发action
他们之间的联系如下:
1.action作用于store ,他是行为的抽象,是最普通的函数,他的里面会定义一个简单的函数,里面会有type属性和一个集体的行为,也就是具体套作改变的方法。
2.reducer根据store相应 ,他是相应的额抽象,他会传入原始的状态,和将要进行的行为(action),只有触发行为之后才会生成新的状态,也就是reducer的返回值
3.对于redux来说,store是唯一的
4.store包含了完整的state
5.state是完全可以预测的

简单的理解

事实上,我们可以吧reducer看作是一个对象

store我们可以看做是一个仓库,需要用createStore方法传入reducer里面的reducer的store,一个应用对应了一个store

获取将要做出数据交互的位置

render()
store的subscribe方法监听state变化,一旦变化就执行render函数,也就是对应的改变valueE1里面的数据
store.subscribe(render)

store的dispatch定义一个操作信息,reducer会将这个信息匹配具体对state的操作/ 视图层操作 用来监听事件通过dispatch派发action行为,以数据做出相应的更新

还需要了解的是方法
1.applyMiddlewares():传入中间件,并将其依次执行
2.connect: 连接容器组件和UI组件

具体的connect mapStateToProps mapDispatchToProps方法请参考

Provider
它就相当于我们整体的容器组件(不过区别很大)
用法就是在我们根组件外部嵌套一层Provider,传入store
(使用全局的store有风险)
v这样所以的子组件都可以开心地拿到state了
我们也省心了,他的具体使用

具体请参考:链接标题

喜欢的小伙伴可以点下关注,欢迎小伙伴来我和一起谈论关于前端的问题,也衷心的希望大牛们能指出我的不足,非常感谢

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复