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 ...
随机推荐
- 黑马 - poi Excel2
文件上传: //划线处值得效仿 构造用户列表:User.java 批量保存用户
- 观世音甘泉活树的故事竟然是Java设计模式：备忘录模式
目录 定义 意图 主要解决问题 何时使用 优缺点 结构 白箱实现 黑箱实现 多重检查点 观世音甘泉活树的故事 定义 备忘录模式是对象的行为型模式,备忘录对象是一个用来存储另外一个对象内部状态的快照的对 ...
- poj_3617 解题
题意: 给定长度为N的字符串S,要构造一个长度为N的字符串T串. 从S的头部删除一个字符,加到T的尾部 从S的尾部删除一个字符,加到T的尾部 目标是构造字典序尽可能小的字符串. 示例输入: ACDBC ...
- 2021S软件工程——案例分析作业
2021S软件工程--案例分析作业 18231169 黄思为 项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任建) 这个作业的要求在哪里 案例分析作业 我在这个课程的目标是 了解并熟悉 ...
- Fastjson反序列化漏洞复现
Fastjson反序列化漏洞复现 0x00 前言 对Fastjson反序列化漏洞进行复现. 0x01 漏洞环境 靶机环境:vulhub-fastjson-1.2.24 ip:172.16.10.18 ...
- hdu1839 二分最短路
题意: 给你n个城市,m条双向边,每条边有自己的长度和最大运输量,让你找到一条时间小于等于T的运输能力最大的那条路... 思路: 刚开始以为是费用流呢,后来发现根本不是,因为根 ...
- POJ3277 线段树段更新，点询问+二分离散化+暴力
题意: x轴上有一些矩形,问你这些矩形覆盖的面积和是多少. 思路: 首先范围很大,n很小,果断离散化,然后我们就是求出任意区间的最大值作为当前区间的高,最后在算一遍答案就行了, ...
- WindowsPE 第七章 资源表
资源表 在程序设计中,总会设计一些数据.这些数据可能是源代码内部需要用到的常量,菜单选项.界面描述等:也可能是源代码外部的,比如程序的图标文件.北京音乐文件.配置文件等,以上这些数据统称为资源.按照程 ...
- Windows 签名伪造工具的使用,Python,签名
#!/usr/bin/env python3 # LICENSE: BSD-3 # Copyright: Josh Pitts @midnite_runr import sys import stru ...
- IOS Widget（4-1）：创建可配置小组件（静态配置数据）
引言 经过前面几篇文章阅读,已经掌握开发一款小组件的基本技能了,接下来开始掌握一些相对高级一点的技能.本文创建一个可配置小组件,通过修改时间类型,让Text空间显示不同格式的时间. 本文大纲 添加 ...