• Redux入门指南


    简介

    redux是可预测的JS应用状态容器。
    

    状态

    现在有一个开关按钮组件ToggleButton,而按钮的on/off就是这个组件的状态。
    一个应用里面会有大量的组件,而管理以及传递这些组件的状态,就成了非常繁琐的工作。redux使用一个非常简洁的思路,方便地提供不同层级组件的解耦式状态操作。

    管理状态

    reudx本身是一个非常简单的流程概念,它仅仅是一个状态容器。如图:
    redux-flow

    APP或者说是Web/SPA,在组件化的应用中,会有着大量的组件层级关系,深嵌套的组件与浅层父组件进行数据交互,变得十分繁琐困难。而redux,站在一个服务级别的角度,可以毫无阻碍地(这个得益于react的context机制,后面会讲解)将应用的状态传递到每一个层级的组件中。一整个应用,得一管家,足矣。

    redux三大准则

    使用redux过程中,只需要知晓这几个准则,就可以非常便捷地进行开发,少踩坑才是硬道理。

    单一数据源

    整个应用状态,都应该被存储在单一store的对象树中。

    只读状态

    唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),这个动作以最小的数据,去描述发生了什么。

    比如,用户想要从状态中删除一条TODO信息:

    //Action
    {
        type: constant.REMOVE_TODO,
        id: 'TODO_ID'
    }

    非常简单,动作(Action)只需要一个type来描述这个动作类型,以及一个简单的id去表明要删那条信息。并不需要提供包含timestampdata在内的一大堆信息。

    使用纯函数去修改状态

    纯函数(pure function)可被看成是一个状态机,在任何时候,只要有相同的输入,就会得到相同的输出:

    //pure function
    //add(1, 2) ===> 3
    //add(1, 2) ===> 3
    function add(a, b){
        return a + b;
    }
    
    //impure function
    //不纯函数,多次使用相同参数调用,可能会得出不同结果
    //add(1) ===> 1
    //add(1) ===> 2
    var count = 0;
    function add(n){
        return count + n;
    }

    这种修改状态的纯函数在redux里面被称作reducer,纯函数保障了状态的稳定性,不会因不同环境导致应用程序出现不同情况。而这也是redux内核的精髓(核心源码分析章节会讲解)。

    redux几个概念

    以上是redux的一些介绍,下面就开始入门redux。实际上,redux使用起来非常简单,就以上面提到的图片进行介绍。

    Action

    第一步,当然就是Action这个动作了,它可是唯一可以改变状态的途径,包括服务器来的推送以及用户操作,最终都需要转化为一个个Action。这种简单的方式解决了传统应用因为多种方式修改状态,而导致应用出现各种问题。

    通过集中化对状态的修改,Action会按着严格的顺序一个个执行,因此应用并不会出现竞态的情况;Action仅仅是一个纯的JS对象,因此这个动作,可以被记录、序列化、存储以及以后通过一系列的“回放”来调试应用。

    一个简单的添加TODO信息的动作:

    {
        type: constant.ADD_TODO,
        msg: "下班回家收衣服"
    }

    Store

    第二步,store可以被看作redux的最核心部分,一个小小的store,管理着整个应用的状态。其中包括:应用状态初始化、状态修改、注册状态变化监听器、替换应用状态。

    当然,现在并不会涉及到这么多内容。store提供了一个方法#dispatch,这个就是用来发送一个动作,去修改store里面的状态,然后可以通过#getState方法来重新获得最新的状态:

    //dispath above action
    store.getState() // ===> {todo: []}
    store.dispatch({
        type: constant.ADD_TODO,
        msg: "下班回家收衣服"
    });
    store.getState() // ===> {todo: ['下班回家收衣服']}

    然后返回的新状态,即将作为应用的状态通过props(在react应用里面)发送回APP。APP接收到新的props会对应用进行实时更新。这样就完成一个动作触发到应用更新的过程了。

    Reducer

    刚有耳闻,这个reducer是用来修改状态的。再回顾上面的代码,在store.dispatch后发现store.getState调用返回的对象变了。

    那应该是reducer做了手脚,顺带一提,reducer会接收两个参数:现在的状态state,被发送的动作Action

    function todo(state = [], action){
        if(action.type === constant.ADD_TODO){
            //如果是添加TODO的动作,那就赶紧把TODO存起来
            state.push(action.msg);
            return state;
        }else {
            //其他动作的话,就不改状态啦,原样返回
            return state;
        }
    }

    store通过读取reducer返回的内容,来作为新的状态,因此应用状态就更新了!

  • 相关阅读:
    基于jquery自己写滑动门(通用版)
    这一年,做为asp.net程序员我合格吗?
    基于jquery的滚动条滚动固定div(附Demo)
    asp.net获取数据随机显示(原创)
    为昨天一篇博文【asp.net,对于一个有点经验的猴子,我的要求高么?】做点解释
    2012年总结,2013年更精彩。
    放大镜
    be strong
    模拟凡客导航
    Ajax中Get请求与Post请求的区别(转载)
  • 原文地址:https://www.cnblogs.com/wyaocn/p/5803038.html
Copyright © 2020-2023  润新知