我想 很多人刚接触redux的时候都很蒙圈尤其是模块化开发的时候 一会儿就绕晕了
我这次用一个加减法最简单的 一个页面来说明redux 我想大家直接看下就懂了
直接复制粘贴就可以运行了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--redux的cdn-->
<script src="https://cdn.bootcss.com/redux/3.7.2/redux.js"></script>
</head>
<body>
<p>
<span id="crement">0</span>
<button id="increment">+</button>
<button id="decrement">-</button>
</p>
<script type="text/javascript">
//定义action中的type的value 因为多个地方要用
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
//定义reducer（不要问我reducer是什么，知道怎么用就行了）
const counter = (state = 0,action) => {
switch(action.type){
case INCREMENT:
return state + 1
case DECREMENT:
return state - 1
default:
return state
}
}
//把定义的reducer仍在redux中的createStore
const store = Redux.createStore(counter)
//每次数据改变后需要渲染的地方（此render不是react的render）
const render = () => {
// store.getState()获取state数据的地方
crement.innerHTML = store.getState()
}
//第一次打开时 运行 获取state的初始值
render()
//subscribe相当于watch（每次数据改变就运行render）
store.subscribe(render)
//increment+
increment.addEventListener('click',()=>{
//运行dispatch 给它一个action
store.dispatch({type:INCREMENT})
})
//decrement-
decrement.addEventListener('click',()=>{
store.dispatch({type:DECREMENT})
})
</script>
</body>
</html>
这篇代码仅限redux （react，react-redux，都没有用）
之后会再出一篇三者结合使用的
网友评论