网页前端状态管理库Redux学习笔记（一）
最近在博客园上看到关于redux的博文，于是去了解了一下。
这个Js库的思路还是很好的，禁止随意修改状态，只能通过触发事件来修改。中文文档在这里。
前面都很顺利，但是看到异步章节，感觉关于异步说得很乱，而且必须配合插件才能实现异步。我是不喜欢用插件的人，能不用则不用。因此自己写了一个异步解决方案。大致的思路如下：
- 只在一个函数doSometing中处理异步方法和处理返回值，使用action传递执行类型参数
- 需要执行异步方法时，使用action传递参数，指示函数执行异步，然后返回特定状态，例如字符串"fetching"
- 在异步方法的回调中再次触发此状态修改（执行store.dispatch）
- 需要执行处理返回的数据时，使用action传递参数，指示函数执行数据处理，然后返回正确的状态值
- 最后，指定在哪里处理正确的状态值，可以在状态对象中订阅事件，也可以在第3步中直接处理
最后，贴上我写的例子，欢迎指教：）
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Redux Demo</title>
<style>
html,body{
height: 100%;
overflow: hidden;
margin: 0;
}
#box{
max-height: 85%;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
margin: 0;
list-style-type: none;
}
#box>li:first-child{
margin-top: 0;;
}
#box>li:last-child{
margin-bottom: 0;
}
li{
background: #f23;
padding: 5px 10px;
margin: 5px;
}
#btn{
width: 120px;
height: 10%;
margin: 2.5% calc(50% - 60px);
}
dialog::backdrop {
background: rgba(0,0,0,0.9);
}
</style>
</head>
<body>
<button id="btn">click btn</button>
<ul id="box"></ul>
<dialog id="dial"></dialog> <script type="text/javascript" src="http://cdn.bootcss.com/redux/3.5.2/redux.min.js" ></script>
<script type="text/javascript">
var store;
Type1();
btn.addEventListener("click",function() {
store.dispatch({type:"act",doAddItem:true});
}); function renderListItem(index, callback) {
box.innerHTML+="<li><p>user "+index+"</p><p>your words here.</p></li>";
!!callback && callback();
}
function showLoading (msg, isCanClose) {
dial.innerHTML=msg;
!dial.open && dial.showModal();
isCanClose && (dial.onclick=function(){this.close();dial.onclick=null;});
}
function hideLoading () {
dial.close();
}
function Type1(){
var FLAGS={
INCREMENT:"i",
DECREMENT:"d",
SAYHI:"s"
};
function counter(state, action) {
!state && (state=1);
return (action===FLAGS.INCREMENT)?(++state):(--state);
}
function sayHello(state, action) {
state=!!action.name?action.name:"robin";
return (action.word||"hello")+", "+state;
}
function asyncCall (callback) {
window.setTimeout(function () {
callback && callback();
},3000);
}
function addListItem (state, param) {
if(typeof param.asyncCall!=="number"){
showLoading("waiting for fetching......");
(typeof state!=="number") && (state=-1);
asyncCall((function (state) {
return function () {
store.dispatch({type:"act",doAddItem:{asyncCall:state}});
};
})(state));
return "fetching";
}else{
var msg;
state=param.asyncCall;
(~~(10*Math.random()))%2===0 && (msg="internal error");
if(!msg){
renderListItem(++state, hideLoading);
}else{
showLoading("error : "+msg, true);
}
return state;
}
}
function Reducers (state, action) {
!state && (state={});
!!action.doSayHi && (state.sayHello=sayHello(state.sayHello, action.doSayHi));
!!action.doCounter && (state.counter=counter(state.counter, action.doCounter));
!!action.doAddItem && (state.itemCount=addListItem(state.itemCount, action.doAddItem));
return state;
} store=Redux.createStore(Reducers);
store.subscribe(()=>{
var state=store.getState();
console.log("state changed to : ", state);
});
console.log("init state is : ",store.getState()); function action(conf){
var res={type:"action"};
if(!!conf){
!!conf.doSayHi && (res.doSayHi={name:conf.doSayHi.name, word:conf.doSayHi.word});
!!conf.doCounter && (res.doCounter=conf.doCounter);
!!conf.doAddItem && (res.doAddItem=conf.doAddItem);
}
return res;
} var act=action({
doSayHi:{
name:"Gant",
word:"Good noon"
}
});
store.dispatch(act); act=action({
doCounter:FLAGS.INCREMENT
});
store.dispatch(act); act=action({
doSayHi:{
name:"Rassual",
word:"Good morning"
}
});
store.dispatch(act); act=action({
doSayHi:{
name:"dear dd",
word:"Good evening"
},
doCounter:FLAGS.DECREMENT
});
store.dispatch(act);
}
</script>
</body>
</html>
网页前端状态管理库Redux学习笔记（一）的更多相关文章
- 记前端状态管理库Akita中的一个坑
记状态管理库Akita中的一个坑 Akita是什么 Akita是一种基于RxJS的状态管理模式,它采用Flux中的多个数据存储和Redux中的不可变更新的思想,以及流数据的概念,来创建可观察的数据存储 ...
- 比Redux更容易上手的状态管理库
前言 当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如Re ...
- React 新 Context API 在前端状态管理的实践
本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...
- React+Redux学习笔记：React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- 轻量级状态管理库Pinia试吃
最近连续看了几个GitHub上的开源项目,里面都用到了 Pinia 这个状态管理库,于是研究了一下,发现确实是个好东西!那么,Pinia 的特点: 轻量化 -- Pinia 体积约1KB,十分轻巧 ...
- vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- [Python ]小波变化库——Pywalvets 学习笔记
[Python ]小波变化库——Pywalvets 学习笔记 2017年03月20日 14:04:35 SNII_629 阅读数:24776 标签: python库pywavelets小波变换 更多 ...
- 文献管理器endnote学习笔记
目录 文献管理器endnote学习笔记 一.文献信息输入(将文献信息添加到文献管理软件endnote的多种方法) 1.在线检索(方便快捷,但有些网站无法直接检索) 2.网站输出(所有网站都支持的方式, ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
随机推荐
- Mac下对Android apk反编译
在Mac上进行反编译apk,需要三个工具,分别为(附下载地址): apktool,下载Mac版 作用:资源文件获取,能够提取出图片文件和布局文件进行使用查看 dex2jar,下载最新的即可,目前是2. ...
- 取代PHP原生函数的一些扩展包
前言 虽然程序员无时无刻都在造轮子,但造轮子也有效率之分,用好轮子才能造出好"
- Django——9 博客小案例的实现
Django 博客小案例的实现 主要实现博客的增删改查功能 主页index.html --> 展示添加博客和博客列表的文字,实现页面跳转 添加页add.html --> 输入文章标 ...
- xth 的玫瑰花（codevs 1360）
题目描述 Description 这天是rabbit 的生日前夕,Xth 来到花店,要给他的rabbit 买玫瑰花,为了保证质 量,他跟花店老板——小菜儿同学要求自己到花田采摘.小菜儿灰常希望早日见到 ...
- CI笔记
1.控制器 实现自己的控制器MY_Controller是在./application/core/MY_Controller.php中. 2.类库 添加自己的类是放在./application./lib ...
- 本地数据文件加载到hive表
1.在test数据库下创建表格 hive> create table vod_record_all( > watch_time date, > device_id string, & ...
- python 使用scapy编写DNS Fuzzer
1. 描写叙述 使用scapy库,编写一个DNS Fuzzer工具,并測试.在这之前.先说明一下DNS协议请求包是封装在IP包中的UDP包(有些情况也可使用TCP)中.且UDP的端口为53. 进入sc ...
- test框架搭建
http://blog.csdn.net/huilan_same https://github.com/huilansame/Test_framework
- ExtJs4.1布局具体解释
Border布局: Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create('Ext.container.Viewport', ...
- TTS-零基础入门之停止列表中单条语音播报
做了一个语音 循环播报列表信息.当我新删除了一天列表之后,发现它仅仅有在下一轮播报中才会取消.这明显是不合理的. 一開始的代码是这样写的. <span style="font-fami ...