Redux 源码自己写了一遍
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<script type='text/javascript'>
// var f = function( ...arg ){
// arg 是个数组
// ...arg 是传递进来的原封不动的值
// } // const reducer = function(state, action){
// if(!state){
// state = initialState;
// }
// let nextState = _.deepClone(state); // switch(action.type){
// case 'ADD_TODO':
// nextState.todos.push( action.payload );
// break;
// case 'INCREASE':
// nextState.counter = nextState.counter++;
// break;
// default:
// break;
// } // return nextState;
// } /*** compose ***/
// compose(func3, func2, func1)(0);
// 相当于写了 func3( func2( func1(0) ) )
const compose = function( ...funcs ) {
// 若没有传递参数, 则直接返还1个函数
if ( funcs.length === 0 ) {
return arg => arg;
} // 若只有1个参数, 则直接返还这个函数
if ( funcs.length === 1 ) {
return funcs[0];
} // 取出最后1个函数 当作 reduceRight的第2个参数
const last = funcs[funcs.length - 1];
// 取除了最后一个函数以外的函数数组
const rest = funcs.slice(0, -1);
// 所传递进来的参数 都当作 最后1个函数的参数
return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
} /*** combineReducers ***/
const combineReducers = function(obj){
return function(state, action){
// nextState 为返回的新 state
let nextState = {};
for(var item in obj){
// obj[item] 为item 对应的reducer
/*
state[item] 的意思是 state 对应与 item 上的值,
比如 state 为 { counter: 0}, state[item]的值就为 0
*/
nextState[item] = obj[item]( state[item], action );
}
return nextState;
}
} /*** bindActionCreators ***/
const bindActionCreators = (obj, dispatch) => {
let objNew = {};
for(let i in obj){
// item 为创建 action 的函数
let item = obj[i];
objNew[i] = (...args) => {
dispatch( item(...args) );
}
}
return objNew;
} /*** applyMiddleware ***/
// 传入所有的中间件
const applyMiddleware = (...middlewares) => {
// 可以传入 createStore 作为参数
return (createStore) => {
// 这一步已经生成了 增强版本的 createStore
return (reducer, initialState, enhancer) => { let store = createStore(reducer, initialState, enhancer); // 这一步原来的写法是
// let chain = middlewares.map( middleware => middleware(store) );
// 源代码里是 从新创建了一个store
let storeNew = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
let chain = middlewares.map( middleware => middleware(storeNew) ); // 只有最后1个函数的传入了 store.dispatch 当作 dispatch,
// 其它函数都是最后1个函数的返回值当作 dispatch
const dispatch = compose(...chain)(store.dispatch); /*
最早本来想下面那样写,
这个结果是所有中间件的 dispatch 都为 store.dispach let chain = [...middlewares].map( (item) => {
return item(store)(store.dispatch);
} ); const dispatch = (action) => {
compose(...chain)(action);
}; 打印的结果为: 3 dispatch before
3 dispatch after
2 dispatch before
2 dispatch after
1 dispatch before
1 dispatch after */ return {
getState: store.getState,
subscribe: store.subscribe,
replaceReducer: store.replaceReducer,
dispatch: dispatch
}
}
}
} /*** createStore ***/
const createStore = function(reducer, initialState, enhancer){
if( typeof enhancer === "function"){
return enhancer(createStore)(reducer, initialState);
} let state = initialState;
// 操作的 listeners
let listeners = [];
let listenersCache = listeners; // 但凡 listeners 有变化, 比如push了 或者删除了, 都提前执行下 ensure
const ensure = function(){
// 若相等, 则拷贝一个新的 listeners
if( listeners == listenersCache ){
listeners = listenersCache.slice();
}
} const getState = function(){
return state;
} const dispatch = function(action){
state = reducer(state, action); // 为了让 ensure 执行成功
listenersCache = listeners;
let len = listenersCache.length;
for(let i = 0; i < len; i++){
listenersCache[i]();
} return action;
} const subscribe = listener => {
ensure();
listeners.push(listener); return function(){
ensure();
listeners = listeners.filter(function(item, i){
return item != listener;
});
} } dispatch({});
return {
dispatch: dispatch,
getState: getState,
subscribe: subscribe
}
} const initialState = {
counter: 0,
todos: []
} const counterReducer = function(counter = 0, action){
switch(action.type){
case 'INCREASE':
console.log('Reducer increase');
return counter = counter + 1;
default:
return counter;
}
} const todosReducer = function(todos = [], action){
switch(action.type){
case 'ADD_TODO':
return [...todos, action.payload];
default:
return todos;
}
} const rootReducer = combineReducers({
counter: counterReducer,
todos: todosReducer
}); const actionAdd = (n) => {
return {type: n}
} const store = createStore(rootReducer, initialState); const actionCreate = bindActionCreators(
{actionAdd: actionAdd},
store.dispatch
); store.subscribe(function(){
console.log( store.getState() );
}); store.dispatch( actionAdd('INCREASE') );
actionCreate.actionAdd('INCREASE');
store.dispatch({type: 'ADD_TODO', payload: 'hello world'}); console.log(' ---------- 分割线 ---------- '); // 中间件 1
// 根据源代码 middlewareAPI 是一个新的对象, 类似 store
// 只有store 里的dispatch 和 getState方法
const middleware1 = ( middlewareAPI ) => {
return (dispatch) => {
return (action) => {
console.log( '1 dispatch before' ); // 这个 dispatch 其实是 middleware2 里的函数 (action) => {...}
let actionReturn = dispatch(action); console.log( '1 dispatch after' );
return actionReturn;
}
}
}; const middleware2 = ( middlewareAPI ) => {
return (dispatch) => {
return (action) => {
console.log( '2 dispatch before' ); // 这个 dispatch 其实是 middleware3 里的函数 (action) => {...}
let actionReturn = dispatch(action); console.log( '2 dispatch after' );
return actionReturn;
}
}
}; const middleware3 = ( middlewareAPI ) => {
return (dispatch) => {
return (action) => {
console.log( '3 dispatch before' ); // 这个 dispatch 才是 store.dispatch, 最终只有这里调用 reducer 更新
let actionReturn = dispatch(action); console.log( '3 dispatch after' );
return actionReturn;
}
}
}; let enhancedCreateStore = applyMiddleware(middleware1, middleware2, middleware3)(createStore);
let storeEnhance = enhancedCreateStore(rootReducer, initialState); /*
最后的打印结果是: 1 dispatch before
2 dispatch before
3 dispatch before
Reducer increase
3 dispatch after
2 dispatch after
1 dispatch after
*/
storeEnhance.dispatch({type: 'INCREASE'}); </script>
</body>
</html>
Redux 源码自己写了一遍的更多相关文章
- redux源码解读（二）
之前,已经写过一篇redux源码解读(一),主要分析了 redux 的核心思想,并用100多行代码实现一个简单的 redux .但是,那个实现还不具备合并 reducer 和添加 middleware ...
- redux源码解读（一）
redux 的源码虽然代码量并不多(除去注释大概300行吧).但是,因为函数式编程的思想在里面体现得淋漓尽致,理解起来并不太容易,所以准备使用三篇文章来分析. 第一篇,主要研究 redux 的核心思想 ...
- Redux 源码解读 —— 从源码开始学 Redux
已经快一年没有碰过 React 全家桶了,最近换了个项目组要用到 React 技术栈,所以最近又复习了一下:捡起旧知识的同时又有了一些新的收获,在这里作文以记之. 在阅读文章之前,最好已经知道如何使用 ...
- 从Redux源码探索最佳实践
前言 Redux 已经历了几个年头,很多 React 技术栈开发者选用它,我也是其中一员.期间看过数次源码,从最开始为了弄清楚某一部分运行方式来解决一些 Bug,到后来看源码解答我的一些假设性疑问,到 ...
- redux源码浅入浅出
运用redux有一段时间了,包括redux-thunk和redux-saga处理异步action都有一定的涉及,现在技术栈转向阿里的dva+antd,好用得不要不要的,但是需要知己知彼要对react家 ...
- redux源码解读
react在做大型项目的时候,前端的数据一般会越来越复杂,状态的变化难以跟踪.无法预测,而redux可以很好的结合react使用,保证数据的单向流动,可以很好的管理整个项目的状态,但是具体来说,下面是 ...
- Redux源码学习笔记
https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...
- redux源码阅读之compose,applyMiddleware
我的观点是,看别人的源码,不追求一定要能原样造轮子,单纯就是学习知识,对于程序员的提高就足够了.在阅读redux的compose源码之前,我们先学一些前置的知识. redux源码阅读之compose, ...
- 带着问题看redux源码
前言 作为前端状态管理器,这个比较跨时代的工具库redux有很多实现和思想值得我们思考.在深入源码之前,我们可以相关注下一些常见问题,这样带着问题去看实现,也能更加清晰的了解. 常见问题 大概看了下主 ...
随机推荐
- bzoj 2705: [SDOI2012]Longge的问题——欧拉定理
Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). Input 一 ...
- 【BZOJ】2151 种树
[算法]贪心+堆 [题意]n个数字的序列,要求选择互不相邻的k个数字使和最大. [题解] 贪心,就是按一定顺序选取即可最优,不会反悔. 考虑第一个数字选择权值最大的,那么它相邻的两个数字就不能选择,那 ...
- 14、char和varchar的区别？
就长度来说: ♣ char的长度是不可变的; ♣ 而varchar的长度是可变的,也就是说,定义一个char[10]和varchar[10],如果存进去的是‘csdn’,那么char所占的长度依然为1 ...
- bzoj 2258 splay
类似于1014,用splay维护这个序列,维护每个节点为根的子树的hash值,对于一个询问二分答案判断就行了. 反思:询问的时候因为是原序列的x,y,所以开始的时候直接splay(x-1)了,后来发现 ...
- 变量对象vs活动对象
这是我见过描述的最为详尽的关于变量对象.活动对象以及闭包的解析,来自知乎,感谢答主: 作者:闭家锁链接:https://www.zhihu.com/question/36393048/answer/7 ...
- Perl6 Bailador框架(8):自定义400/500
第一种方法, 直接写在源码中: use Bailador; get '/' => sub { '<h1>hello, Bailador</h1>'; } get '/te ...
- python中requests库中文乱码问题
当使用这个库的时候经常会出现各种乱码的情况. 首先要知道: text返回的是处理过的unicode的数据. content返回的是bytes的原始数据 也就是说r.content比r.text更加节省 ...
- kimbits_USACO
StringsobitsKim Schrijvers Consider an ordered set S of strings of N (1 <= N <= 31) bits. Bits ...
- Python2.7.3 Tkinter Entry(文本框) 说明
Python学习记录--关于Tkinter Entry(文本框)的选项.方法说明,以及一些示例. 属性(Options) background(bg) borderwidth(bd) cursor ...
- linux内核网络接收数据流程图【转】
转自:http://blog.chinaunix.net/uid-23069658-id-3141409.html 4.3 数据接收流程图 各层主要函数以及位置功能说明: 1)s ...