网页前端状态管理库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样式表. 官方解说是:基于流的自动化构 ...
随机推荐
- C#学习笔记_08_面向对象
08_面向对象 面向对象:一种看待问题解决问题的思维方式,着眼点在于找到一个能够帮助我们解决问题的实体,然后委托这个实体来帮我们解决问题:(在面向对象之前你要有一个女朋友,否则代码会经常出现bug) ...
- AtCoder ABC 085C/D
C - Otoshidama 传送门:https://abc085.contest.atcoder.jp/tasks/abc085_c 有面值为10000.5000.1000(YEN)的纸币.试用N张 ...
- Ac自动机基础题集合
Ac_automaton的板子打熟以后发现碰到题不会做,而且还是比较纯的板子,只要改几处地方就可以,Ac_automation有许多优秀而fantasy的性质,下面粘几个题,来记录一下做题的心得. 1 ...
- BZOJ 4032 Luogu P4112 [HEOI2015]最短不公共子串 (DP、后缀自动机)
这其实是道水题... 题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=4032 (luogu)https://www.luog ...
- java中String类型转换为float类型
import java.io.*; public class Demo1{ public static void main(String args[]) { String df="12.2& ...
- html实现 省——市——区三级联动
html实现 省——市——区三级联动 html中实现三级联动是一个不错的demo,博主在这里跟大家分享一下实现的过程,以及自己在过程中出现的一些问题,仅供参考. 首先我们将全国的省市区数据导入进来, ...
- iOS: 两句话给UILabel添加下划线
1. 将UILabel控件的Text属性设为Attributed 2. 在viewDidLoad方法中添加如下语句: NSDictionary *underlineAttribute = @{NSUn ...
- AngularJS：添加检查密码输入是否一致的功能
感谢作者(http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match) 利用AngularJS的 ...
- STL_算法_填充新值(fill、fill_n、generate、generate_n)
C++ Primer 学习中... 简单记录下我的学习过程 (代码为主) 全部容器适用 fill(b,e,v) //[b,e) 填充成v fill_n(b,n,v) ...
- 学习笔记——DISTINCT
DISTINCT印象中向来被人诟病,说它效率低下.但网上那些SQL 面试题答案,却时有用之.其中 COUNT(DISTINCT 句式,我以前很少用,这里做个笔记. 为管理岗位业务培训信息,建立3个表: ...