redux教程（二）redux的相关示例以及实现原理
程序员文章站
2024-03-06 15:59:56
...
简单示例
前面一个章节，我介绍了一下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>
<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>