网页前端状态管理库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样式表. 官方解说是:基于流的自动化构 ...
随机推荐
- JS布尔值(Boolean)转换规则
原文作者: louis 原文链接: http://louiszhai.github.io/2015/12/11/js.boolean/ 语法 众所周知, JavaScript有五个基本的值类型:num ...
- Flask - WTF和WTForms创建表单
目录 Flask - WTF和WTForms创建表单 一. Flask-WTF 1.创建基础表单 2.CSRF保护 3.验证表单 4.文件上传 5.验证码 二. WTForms 1. field字段 ...
- Git 基础教程 之 远程推送
当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应了起来,并且,远程仓库默认名称是origin. git remote 查看远程库信息 git remote - ...
- Navicat premium连接Oracle报ORA-28547错误
1:ORA-28547 原因:navicate Primium版本的OCi和本地数据库的OCI版本不一致. 解决方法: 1:把navicate Primium版本自带oci.dll替换本地Oracle ...
- 关于python字符串format的一些花式用法
目录: 基础 实战 前提: python中字符串的format功能非常强大,可以说完全能够替代其他的字符串使用方法,但是在后期的项目开发中使用的并不是特别的多, 以至于想用的时候会想不起来准确的使用方 ...
- 敏捷开发系列学习总结（5）——这几招搞定团队协同Coding
一个团队在一起Coding时,就怕发生这样的事情:同1个文件你改了,我也改了,他也改了,最后怎么同步呢?以前用clearcase时,A把文件checkout了,其他人就不能提交,保证了代码的唯一性.但 ...
- 51nod——1432 独木桥
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1432 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 ...
- war包结构
一个war包里面必含的两个目录是meta-inf和web-inf文件夹 一个war包里面必含的两个目录是meta-inf和web-inf文件夹 一个war包里面必含的两个目录是meta-inf和web ...
- iOS：制作左右侧滑（抽屉式）菜单
感谢控件作者:https://github.com/SocialObjects-Software/AMSlideMenu 首先上效果图: 这里我们使用AMSlideMenu来实现左右侧滑菜单的效果.控 ...
- Spark Streaming接收Kafka数据存储到Hbase
Spark Streaming接收Kafka数据存储到Hbase fly spark hbase kafka 主要参考了这篇文章https://yq.aliyun.com/articles/60712 ...