最近在學習redux 一些新的分享給大家，相互學習
Redux基於簡化版本的Flux框架，Flux是Facebook開發的一個框架。大家想要很好的理解reduc 可以去學習一下Flux。
線上代碼
<!DOCTYPE html>
<html>
<head>
<title>Redux basic</title>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p><span id="colorEl">Watch my color.</span>
<button id="red">RED</button>
<button id="green">GREEN</button>
<button id="toggle">TOGGLE</button>
</div>
<script type="text/javascript">
var initialState = {
color: 'red'
}
function color(state, action) {
if(typeof state === 'undefined') {
return initialState
}
switch(action.type) {
case 'RED' :
return { color: 'red'}
case 'GREEN' :
return { color: 'green'}
case 'TOGGLE' :
return state.color === 'red' ? {color:'green'} : {color:'red'}
default :
return state
}
}
var store = Redux.createStore(color)
var colorEl = document.getElementById('colorEl')
function renderValue() {
colorEl.style.color = store.getState().color
}
renderValue()
//註冊監聽器
store.subscribe(renderValue)
document.getElementById('red').addEventListener('click', function(){
store.dispatch({
type: 'RED'
})
})
document.getElementById('green').addEventListener('click', function(){
store.dispatch({
type: 'GREEN'
})
})
document.getElementById('toggle').addEventListener ('click', function(){
store.dispatch({
type: 'TOGGLE'
})
})
</script>>
</body>
</html>
我們先看代碼是怎麼執行的 先不看具體含義 只看執行順序
1 首相創建一個 store的對象 先不管他是幹嘛用的
2 click 點擊事件的方法 調用了store.dispatch()的方法了
3 dispatch 的方法執行表示 調用了color的方法。把state裏面color的值改變了
4 這時監聽state值變化的方法執行了 ，也就是 store.subscribe(renderValue) 的方法執行了
5 然後 調用了 renderValue()的方面 跟新了頁面
https://blog.csdn.net/a153375250/article/details/53374081 結合這篇文章在理解一下