Redux 原理和简单实现
前端开发中React + Redux 是大部分项目的标配，Redux也是我喜欢的库之一，他的源码也拜读过几遍，每次都有很多收获，尤其他的中间件设计模式，对自己封装一些库提供了思想上的指导。
Redux工作流程如下图：
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> function compose(middlewares) {
// 相当于fn1(fn2(fn3(...ages)))
// 所以中间件是从右到左执行
return middlewares.reduce((a, b) => (...args) => a(b(...args)));
} function createStore(reducers, middlewares) {
const currentState = {};
let dispatch = function (action) {
Object.keys(reducers).forEach(function (key) {
currentState[key] = reducers[key](currentState[key], action);
})
} function getState() {
return currentState;
} if (middlewares) {
// 通过闭包，把当前的dispatch, getState传递到中间件中
// (action, ...args) => dispatch(action, ...args) 这里需要使用函数实时获取dispatch, 可以理解为next等价
const chain = middlewares.map(middleware => middleware((action, ...args) => dispatch(action, ...args), getState))
// 传递dispatch标识next
dispatch = compose(chain)(dispatch);
} dispatch({type: 'INIT'});
return {
dispatch,
getState
}
} // log 中间件
function logMiddleware(dispatch, getState) {
return function (next) {
return function (action) {
console.log(`当前的age: ${getState().userInfo ? getState().userInfo.age : null}, 将要更新age为：${JSON.stringify(action)}`);
return next(action);
}
}
} // thunk 中间件可以异步请求
function thunkMiddleware(dispatch, getState) {
return function (next) {
return function (action) {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
}
}
} const store = createStore({
userInfo: function (prevState = {age: 1, name: 'initName'}, action) {
switch (action.type) {
case 'SET':
return {...prevState, ...action.value};
default:
return prevState;
}
}
}, [thunkMiddleware, logMiddleware]); console.log('init', store.getState().userInfo.name, store.getState().userInfo.age); store.dispatch({type: 'SET', value: {age: 18}}); store.dispatch(function (dispatch, getState) {
// 模拟异步请求
setTimeout(function () {
dispatch({type: 'SET', value: {age: getState().userInfo.age + 1}})
}, 2000);
}); console.log(store.getState().userInfo.name, store.getState().userInfo.age); store.dispatch({type: 'SET', value: {name: 'xiaoLi'}}); console.log(store.getState().userInfo.name, store.getState().userInfo.age); setTimeout(function () {
console.log(store.getState().userInfo.name, store.getState().userInfo.age);
}, 2000); </script>
</body>
</html>
Redux 原理和简单实现的更多相关文章
- 轻松理解Redux原理及工作流程
轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...
- HBase笔记：对HBase原理的简单理解
早些时候学习hadoop的技术,我一直对里面两项技术倍感困惑,一个是zookeeper,一个就是Hbase了.现在有机会专职做大数据相关的项目,终于看到了HBase实战的项目,也因此有机会搞懂Hbas ...
- 编译原理（简单自动词法分析器LEX）
编译原理(简单自动词法分析器LEX)源程序下载地址: http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...
- Optaplanner规划引擎的工作原理及简单示例(2)
开篇 在前面一篇关于规划引擎Optapalnner的文章里(Optaplanner规划引擎的工作原理及简单示例(1)),老农介绍了应用Optaplanner过程中需要掌握的一些基本概念,这些概念有且于 ...
- RabbitMQ系列（二）深入了解RabbitMQ工作原理及简单使用
深入了解RabbitMQ工作原理及简单使用 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器Exchange介绍 ...
- 深入解读RabbitMQ工作原理及简单使用
RabbitMQ系列目录 RabbitMQ在Ubuntu上的环境搭建 深入解读RabbitMQ工作原理及简单使用 Rabbit的几种工作模式介绍与实践 Rabbit事务与消息确认 Rabbit集群搭建 ...
- Java注解的基本概念和原理及其简单实用
一.注解的基本概念和原理及其简单实用 注解(Annotation)提供了一种安全的类似注释的机制,为我们在代码中添加信息提供了一种形式化得方法,使我们可以在稍后某个时刻方便的使用这些数据(通过解析 ...
- C++智能指针,指针容器原理及简单实现(auto_ptr,scoped_ptr,ptr_vector).
目录 C++智能指针,指针容器原理及简单实现(auto_ptr,scoped_ptr,ptr_vector). auto_ptr scoped_ptr ptr_vector C++智能指针,指针容器原 ...
- Win Socket编程原理及简单实例
[转]http://www.cnblogs.com/tornadomeet/archive/2012/04/11/2442140.html 使用Linux Socket做了小型的分布式,如Linux ...
随机推荐
- 死磕Spring之AOP篇 - Spring AOP自动代理（二）筛选合适的通知器
该系列文章是本人在学习 Spring 的过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring 源码分析 GitHub 地址 进行阅读. Spring 版本:5.1 ...
- 学习WEB前端是应该自学还是参加培训机构？
先说观点,我强烈建议每个人都要自学,不要参加培训班. 我干web前端工程师这个职位已经有6年多的时间,之前在蚂蚁金服做过2年,后来离开是因为加班实在熬不住才走的,像这些已经上市的互联网公司几乎没有不加 ...
- IDEA 全局搜索，搜索Jar包中内容
配置find in path Ctrl+Shift+F Step 1:点击Scope Step 2:点击"..."更多 Step 3:点击加号"+" Step ...
- Day13_70_join()
join() 方法 * 合并线程 join()线程合并方法出现在哪,就会和哪个线程合并 (此处是thread和主线程合并), * 合并之后变成了单线程,主线程需要等thread线程执行完毕后再执行,两 ...
- Azure CDN 为静态网站创建内容分发网络
一,引言 最近刚刚接触 Edi.Wang 的 Moonglade 博客系统,正好这套系统中有使用到 Azure CND (内容分发网络),那就学习学习.那么今天就尝试利用 Azure CDN 来发布静 ...
- 自动AC机qwq（大雾）以及trie图fail图的一些结论
1 #include<iostream> 2 #include<cstdio> 3 #include<cstring> 4 #include<string&g ...
- 7- MySQL结果数据处理与函数
复习: 查询:select 列名 from 表 去重:distinct 排序:order by 列1 列2 排序方法:asc desc. 限定返回行数:limit n limit n,m 过滤:whe ...
- POJ2570 二进制，位运算，Floyd
题意: 给你一个有向图,两点之间有多种连接方式,然后每次询问都问你点A,B之间有哪些方式可以到达,每个小字母是一个方式. 思路: 很巧妙的位运算和Floyd应用,借助Floyd ...
- 预防NSA勒索病毒攻击脚本
预防445端口勒索病毒修复脚本 直接复制下去,创建一个文件,名字随意后缀是.bat,然后双击就可以了(如果提示拒绝访问,就直接右键管理员,尤其是Win8 Win10). :+添加关键注册表以及停掉并且 ...
- 码农飞升记-02-OracleJDK是什么?OracleJDK的版本怎么选择?
目录 1.Oracle JDK 是什么? 2.Oracle JDK 版本如何选择? 1.Java SE 发布节奏以及不同版本的差距 1.Java SE 8 以及之前版本的发布节奏和不同版本的差距 1. ...