您的位置：首页 > 其它

redux教程（二）redux的相关示例以及实现原理

2018-03-25 19:52 513 查看

简单示例

前面一个章节，我介绍了一下redux的基本概念，那么利用前面讲的那些基本概念，我在这里，写一个关于redux的最简单的示例。

import { createStore } from 'redux';
const store = createStore(function(){
return {
userName:'mapbar_front',
age: 26
}
})
console.log(store.getState());//可以得知，打印出来的是一个对象。

接着，我们可以通过store.getState() 这个方法，得到这个对象的值。

class App extends Component{

render(){
return (
<div className="fx1 wrapper">
我是中国人
<div>
我的名字是:{store.getState().userName}
</div>
&l
4000
t;div>
我的年龄是:{store.getState().age}
</div>
</div>
)
}
}
render(<App />,document.getElementById('root'));

实现原理

如果，仔细观察，我们就会知道，store的三个核心函数。

store.getState

store.dispatch

store.subscribe

围绕着三个核心函数，可以对createState的实现，如下所示。

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

这样，createStore就能够实现redux的功能了。

下面是一个实现的完整的测试示例，能够对数字进行加减操作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function createStore(reducer){
var state,listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state,action);
listeners.forEach(item => item())
}
const subscribe = (listener) => {
listeners.push(listener);
return ()=>{
listeners = listeners.filter(item => item != listener)
}
}
dispatch({});
return {
getState,
dispatch,
subscribe
}
}
</script>
</head>
<body>
<div id="root"></div>
<button onclick="addEvent()">+</button>
<button onclick="decEvent()">-</button>
</body>
<script>
function reducer(state = 0,action) {
switch (action.type){
case "ADD":
return state+1;
break;
case "DEC":
return state-1;
break;
default:
return state
}
}
var store = createStore(reducer);
var obj = document.getElementById('root');
obj.innerHTML = store.getState();
store.subscribe(function () {
obj.innerHTML = store.getState();
})

function addEvent(){
store.dispatch({type: 'ADD'})
}
function decEvent() {
store.dispatch({type: "DEC"})
}
</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航