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 ...
随机推荐
- Python 高级进阶知识（一）
参考 Python学习手册 第四版 1 from vs import import 模块 : 导入的一整个模块(python中模块对应一个py文件) 因为import使用一个变量名引用整个模块对象,所 ...
- Node.js/Vue.js使用jsSHA库进行SHA1/2/3加密
1 概述 jsSHA是一个用JS+TS实现完整SHA系列加密算法的加密库,包括: SHA1 SHA-224/256/384/512 SHA3-224/256/384/512 SHAKE128/256 ...
- Palindromes UVA - 401
A regular palindrome is a string of numbers or letters that is the same forward as backward. For e ...
- python 函数对象、函数嵌套、名称空间与作用域
一 函数对象 一 函数是第一类对象,即函数可以当作数据传递 #1 可以被引用 #2 可以当作参数传递 #3 返回值可以是函数 #3 可以当作容器类型的元素二 利用该特性,优雅的取代多分支的if def ...
- LinearDiscriminantAnalysis参数、属性和方法
[LDA]线性判别分析 参数: solver:一个字符串,指定了求解最优化问题的算法,可以为如下的值. 'svd':奇异值分解.对于有大规模特征的数据,推荐用这种算法. 'lsqr':最小平方差,可以 ...
- K8S(17)二进制的1.15版本部署hpa自动伸缩
K8S(17)二进制部署的K8S(1.15)部署hpa功能 目录 K8S(17)二进制部署的K8S(1.15)部署hpa功能 零.参考文件: 一.生成metrics-proxy证书 二.修改apise ...
- hdu4876 深搜+（随机枚举剪枝）
题意: 给你n个数,让你从选择k个数,然后排成一个环(k个数的顺序随意,但是排成一个环后就不能变了),然后可以在这个环上任意的找连续w个数(w<=k),可以找多次,得到一个值等于当前 ...
- 板载网卡MAC地址丢失后刷回方法[转]
部份客户在进行误操作后发现网卡MAC地址全部变成0,大部客户不知道如何重新将MAC地址写回去.就此问题我们介绍一下,希望可以帮到大家.修改MAC地址时,一定要在纯DOS环境下修改.目前使用U盘DOS引 ...
- XCTF-mfw
mfw mfw是什么东西??? 看题: 进来只有几个标签,挨着点一遍,到About页面 看到了Git,猜测有git泄露,访问/.git/HEAD成功 上Githack,但是会一直重复 按了一次ctrl ...
- 【python】Leetcode每日一题-森林中的兔子
[python]Leetcode每日一题-森林中的兔子 [题目描述] 森林中,每个兔子都有颜色.其中一些兔子(可能是全部)告诉你还有多少其他的兔子和自己有相同的颜色.我们将这些回答放在 answers ...