3. react-redux

作者: kaenry | 来源:发表于2016-06-21 13:07 被阅读861次

    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,比如
      {
        type: 'LOGIN_SUCCESS',
        user: data
      }
    
    1. Store相当于所有state的集合,组件需要订阅集合里的state这样当state变化时就会推送给对应的组件
    2. Reducers通过actiontype来决定更新哪些数据,一般张这样:
    switch(action.type){
            case 'LOGIN_SUCCESS':
                return {
                    user: action.user
                }
            
            default:
                return state
        }
    
    1. Conponents订阅到store的变化就可以根据逻辑做相应的更新,比如登录成功了才可以回帖

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

    相关文章

      网友评论

        本文标题:3. react-redux

        本文链接:https://www.haomeiwen.com/subject/jaqgdttx.html