您的位置：首页 > Web前端 > React

reactjs之redux深度理解

2016-08-09 17:40 513 查看

reactjs之redux深度理解

本来是一名iOS开发者，喜欢钻研技术，最近因为女朋友也在学习前段开发的缘故，自己也看了点 javascript ，当下reactjs如此之火，reactnative 也可开发iOS或者安卓应用。就学习了一下。记录下笔记。

reactjs之createStore + applyMiddleWare 基本实现原理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const counter = (state = 0, action)=> {
switch (action.type) {
case "INCREASE":
return ++state;
break;
case "DECREASE":
return --state;
break;
default:
return state;
}
}

var loggerWrapper = (next)=>(action)=>{
console.log("before logger")
next(action)
console.log("after logger")
}

var xxxWarpper = (next)=>(action)=>{
console.log("xxxx logger")
next(action)
console.log("xxxx logger")
}

var applyMiddleWare = (middlewares)=>(next)=>{
middlewares.forEach((middleware)=>{
next = middleware(next)
})
return next;
}

var enhance = applyMiddleWare([loggerWrapper, xxxWarpper])

var createStore = (enhance,reducer)=>{
let state;
let listeners = [];
const getState = ()=>{
return state ;
}
const subscribe = (lisener)=>{
listeners.push(lisener);
return ()=>{
listeners =listeners.filter(l=>l!==lisener)
}
}
var dispatch = (action)=>{
state = reducer(state,action);
listeners.forEach(listener=>listener());
}
dispatch = enhance(dispatch);
return {getState,subscribe,dispatch};
}

var store = createStore(enhance, counter);
store.subscribe(()=>{
console.log("i am lisenning");
})
document.addEventListener("click",()=>{
store.dispatch({type:"INCREASE"});
})

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html

相关文章推荐

新的分享

章节导航