<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>redux原理</title>
</head>
<body>
<p>02-創(chuàng)建了story方法</p>
<div>
<button onclick="store.dispatch({type:'JIAN', n:1 })">-</button>
<span id="countDisplay">10</span>
<button onclick="store.dispatch({type:'JIA', n:1 })" >+</button>
</div>
<script>
// 獲取元素
const countDisplay = document.getElementById('countDisplay');
// 定義初始數(shù)據(jù)
const countStat = {
count : 5
}
// 通過狀態(tài)改變計算方法
const changeState = (state,action) => {
if(state === null) {
return countStat
}
switch(action.type) {
case 'JIAN':
return {
...state,
count : state.count - action.n
}
break;
case 'JIA':
return {
...state,
count : state.count + action.n
}
break;
default:
return state
}
}
const createStory = (reducer) => {
let state = null
const getState = () => state
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const dispatch = (action) => {
state = changeState(state,action)
listeners.forEach(listener => listener())
}
dispatch({})
return {
getState,
dispatch,
subscribe
}
}
const store = createStory(changeState);
const renderCount = () => {
countDisplay.innerHTML = store.getState().count
}
renderCount();
store.subscribe(renderCount)
</script>
</body>
</html>
redux基本實現(xiàn)原理
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來刻像，“玉大人畅买，你說我怎么就攤上這事∠杆” “怎么了谷羞？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長溜徙。 經(jīng)常有香客問我湃缎，道長，這世上最難降的妖魔是什么蠢壹？ 我笑而不...
- 正文 為了忘掉前任嗓违，我火速辦了婚禮，結(jié)果婚禮上图贸，老公的妹妹穿的比我還像新娘蹂季。我一直安慰自己，他們只是感情好疏日，可當(dāng)我...
- 文/花漫 我一把揭開白布偿洁。 她就那樣靜靜地躺著，像睡著了一般沟优。 火紅的嫁衣襯著肌膚如雪涕滋。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼黔酥，長吁一口氣：“原來是場噩夢啊……” “哼藻三！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起跪者，我...
- 正文 年R本政府宣布，位于F島的核電站嫩舟，受9級特大地震影響氢烘，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜至壤，卻給世界環(huán)境...
- 文/蒙蒙 一威始、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧像街，春花似錦黎棠、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至畴栖，卻和暖如春随静，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- m1 m2代表中間件愤钾，手寫調(diào)用dispatch方法即m1(m2(dispatch))({action:1})通過a...
- 最近看跟react相關(guān)庫的源碼，越來越發(fā)現(xiàn)里面中間件機(jī)制的特別重要候醒，各種類庫都是基于此封裝的功能能颁，比如redux簡...
- 1、為什么要用redux 在React中倒淫，數(shù)據(jù)在組件中是單向流動的伙菊，數(shù)據(jù)從一個方向父組件流向子組件（通過props...
