网页前端状态管理库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样式表. 官方解说是:基于流的自动化构 ...
随机推荐
- vue 项目的I18n国际化之路
I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地 ...
- Django——13 Auth系统 登陆注册实例 权限的实现
Django Auth系统中的表 注册登陆实例 权限的实现 登陆权限 操作权限 组操作 Auth系统中的表 从表的名称我们就能看出,auth_user,auth_group,auth_permiss ...
- Django——7 常用的查询 常用的模型字段类型 Field的常用参数 表关系的实现
Django 常用的查询 常用的查询方法 常用的查询条件 常用字段映射关系 Field常用参数 表关系的实现 查用的查询方法 这是需要用到的数据 from django.http import Htt ...
- GeoTrust 企业(OV)型 增强版(EV) SSL证书
GeoTrust 企业(OV)型 增强版(EV) SSL证书(GeoTrust True BusinessID with EV SSL Certificates),验证域名所有权,更严格的验证企业 ...
- ActiveMQ学习总结（10）——ActiveMQ采用Spring注解方式发送和监听
对于ActiveMQ消息的发送,原声的api操作繁琐,而且如果不进行二次封装,打开关闭会话以及各种创建操作也是够够的了.那么,Spring提供了一个很方便的去收发消息的框架,spring jms.整合 ...
- Maven学习总结（6）——Maven与Eclipse整合
Maven学习总结(六)--Maven与Eclipse整合 一.安装Maven插件 下载下来的maven插件如下图所示:,插件存放的路径是:E:/MavenProject/Maven2EclipseP ...
- EasyUI 在textbox里面输入数据敲回车后查询和普通在textbox输入数据敲回车的区别
EasyUI实现回车键触发事件 $('#id').textbox('textbox').keydown(function (e) { if (e.keyCode == 13) { alert('ent ...
- Codeforces Round #305 (Div. 2) D题 （线段树+RMQ）
D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- jquery easyui datagrid实现数据改动
1.单击选中待改动行 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...
- The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
完整错误信息: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY ...