前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3. react-redux

3. react-redux

作者头像
MasterVin
发布2018-08-30 10:21:07
6820
发布2018-08-30 10:21:07
举报

react-reduxreactjs官方推荐的state管理器。具体的定义我就不说了,因为有很多地方比我说的好,大家可以Google或参照:redux中文文档,这个是介绍redux的,react-redux就是reduxreact实现,今天我讲写别的:


1. 为什么要用state管理器

react是一个MV*C的JS框架,render出来的是Virtual Dom,并不是实际Dom,可以这样理解V Dom + state = Domstate类似于渲染需要的数据,V Dom来计算state变化时如何渲染,具体请看Todo,这是所有MV*C架构推荐的例子,另附上一个框架集合网站TodoMVC。 目前为止好像和redux没有什么关系,但是做过实际项目的大家套用在生产项目里就不难看出,如果组件持续增长再加上嵌套,项目将会变得极其难以维护,所以有人发明了这样一个东西flux,我就不细说flux了,然后又有人觉得flux不好用,redux就诞生 了,具体区别参照这篇文章。就我个人总结如下:为了解耦。可能有人会问组件化就已经很解耦了,为什么还要怎么麻烦呢?是的,但是组件解耦之后组件之间的通信以及组件API之间的通信并没有很好的解耦。把这些脏活累活交给redux管理就是我们的目的。

2. redux都有哪些东西

直接盗张图来说明

Paste_Image.png

  1. Action Creators简单理解就是取数据,比如从API取数据,然后封装成action,比如
代码语言:javascript
复制
  {
    type: 'LOGIN_SUCCESS',
    user: data
  }
  1. Store相当于所有state的集合,组件需要订阅集合里的state这样当state变化时就会推送给对应的组件
  2. Reducers通过actiontype来决定更新哪些数据,一般张这样:
代码语言:javascript
复制
switch(action.type){
        case 'LOGIN_SUCCESS':
            return {
                user: action.user
            }
        
        default:
            return state
    }
  1. Conponents订阅到store的变化就可以根据逻辑做相应的更新,比如登录成功了才可以回帖

具体应用以后在代码里说。也可以参照官方TodoList。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.06.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 为什么要用state管理器
  • 2. redux都有哪些东西
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档