redux教程（二）redux的相关示例以及实现原理
程序员文章站
2024-03-06 16:30:20
...
简单示例
前面一个章节，我介绍了一下redux的基本概念，那么利用前面讲的那些基本概念，我在这里，写一个关于redux的最简单的示例。
import { createStore } from 'redux';
const store = createStore(function(){
return {
userName:'mapbar_front',
age: 26
}
})
console.log(store.getState());//可以得知，打印出来的是一个对象。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
接着，我们可以通过store.getState() 这个方法，得到这个对象的值。
class App extends Component{
render(){
return (
<div className="fx1 wrapper">
我是中国人
<div>
我的名字是:{store.getState().userName}
</div>
<div>
我的年龄是:{store.getState().age}
</div>
</div>
)
}
}
render(<App />,document.getElementById('root'));- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
实现原理
如果，仔细观察，我们就会知道，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
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
这样，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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61