3. react-redux

717 查看

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
    }
  2. Store相当于所有state的集合,组件需要订阅集合里的state这样当state变化时就会推送给对应的组件
  3. Reducers通过actiontype来决定更新哪些数据,一般张这样:

    switch(action.type){
         case 'LOGIN_SUCCESS':
             return {
                 user: action.user
             }
    
         default:
             return state
     }
  4. Conponents订阅到store的变化就可以根据逻辑做相应的更新,比如登录成功了才可以回帖

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