redux入门指南(一)
作者:Jogis 简介redux是可预测的JS应用状态容器。 状态现在有一个开关按钮组件 管理状态reudx本身是一个非常简单的流程概念,它仅仅是一个状态容器。如图: APP或者说是Web/SPA,在组件化的应用中,会有着大量的组件层级关系,深嵌套的组件与浅层父组件进行数据交互,变得十分繁琐困难。而redux,站在一个服务级别的角度,可以毫无阻碍地(这个得益于react的context机制,后面会讲解)将应用的状态传递到每一个层级的组件中。一整个应用,得一管家,足矣。 redux三大准则使用redux过程中,只需要知晓这几个准则,就可以非常便捷地进行开发,少踩坑才是硬道理。 单一数据源整个应用状态,都应该被存储在单一store的对象树中。 只读状态唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),这个动作以最小的数据,去描述发生了什么。 比如,用户想要从状态中删除一条TODO信息: //Action { type: constant.REMOVE_TODO,id: 'TODO_ID' } 非常简单,动作(Action)只需要一个 使用纯函数去修改状态纯函数(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第一步,当然就是 通过集中化对状态的修改, 一个简单的添加TODO信息的动作: { type: constant.ADD_TODO,msg: "下班回家收衣服" } Store第二步, 当然,现在并不会涉及到这么多内容。 //dispath above action store.getState() // ===> {todo: []} store.dispatch({ type: constant.ADD_TODO,msg: "下班回家收衣服" }); store.getState() // ===> {todo: ['下班回家收衣服']} 然后返回的新状态,即将作为应用的状态通过props(在react应用里面)发送回APP。APP接收到新的props会对应用进行实时更新。这样就完成一个动作触发到应用更新的过程了。 Reducer刚有耳闻,这个 那应该是 function todo(state = [],action){ if(action.type === constant.ADD_TODO){ //如果是添加TODO的动作,那就赶紧把TODO存起来 state.push(action.msg); return state; }else { //其他动作的话,就不改状态啦,原样返回 return state; } }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |