react系列--redux __veblen
redux本身与react没有任何关系，只是一个状态管理机制，接下来会从基础使用开始展示，希望可以大家可以有所收获！
redux应用场景
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
1.引入文件
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="list"></ul> <input type="text" id="ipt"> <button id="add">添加</button> <script src="redux.js"></script> <script src="index.js"></script> </body> </html> -
index.js
function render(){ var arr=[1,2,3,4]; var str=""; for(var i=0;i<arr.length;i++){ str+="<li>"+arr[i]+"</li>" } list.innerHTMl=str; } render();
2.创建store
-
index.js就变成了这个样子
function render(){ var arr=[1,2,3,4]; var str=""; for(var i=0;i<arr.length;i++){ str+="<li>"+arr[i]+"</li>" } list.innerHTML=str; } render(); var store=Redux.createStore(function(state,action){ switch (action.type){ case "add": state.push(action.query) return state ; default : return [1,2,3,4,5] } })通过redux.createStore(),创建store，以一个函数作为参数，该函数第一个参数是store管理的状态，通过store.getState()方法获取，第二个参数为监听
dispatch传递过来的内容
3.监听变化，广播修改
-
index.js
function render(){ var arr=store.getState(); var str=""; for(var i=0;i<arr.length;i++){ str+="<li>"+arr[i]+"</li>" } list.innerHTML=str; } var store=Redux.createStore(function(state,action){ switch (action.type){ case "add": state.push(action.query) return state ; default : return [1,2,3,4,5] } }) render(); store.subscribe(render)Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
4.怎么去触发更改呢？（store.dispatch()）
-
index.js
function render(){ var arr=store.getState(); var str=""; for(var i=0;i<arr.length;i++){ str+="<li>"+arr[i]+"</li>" } list.innerHTML=str; } var store=Redux.createStore(function(state,action){ switch (action.type){ case "add": state.push(action.query) return state ; default : return [1,2,3,4,5] } }) render(); store.subscribe(render); add.onclick=function(){ var val=ipt.value; store.dispatch({ type:"add", query:val }) }点击
btn的时候，通过store.dispatch(action)通知store干活，state改变之后，通过store.subscribe(render)重新执行render函数，达到视图更新目的。如果其他视图以来state状态，则只需将页面渲染放入render函数
5.最后附上react案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="react.js"></script>
<script src="browser.min.js"></script>
<script src="react-dom.js"></script>
<script src="redux.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var store=Redux.createStore(function(state,action){
switch (action.type){
case "add" :return Object.assign({}, state, { age:state.age+1 });
case "remove": return Object.assign({}, state, { age:state.age-1 });
default: return {
name:"veb",
age:10
}
}
})
var Btn=React.createClass({
render:function(){
return (
<div>
<button>{store.getState().age}</button>
<button onClick={function(){store.dispatch({type:"add"})}}>+</button>
<button onClick={function(){store.dispatch({type:"remove"})}}>-</button>
</div>
)
}
})
store.subscribe(render);
function render(){
ReactDOM.render(
<Btn />,
document.getElementById('app')
);
}
render();
</script>
</html>
更深层次的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../react/react.js"></script>
<script src="../react/react-dom.js"></script>
<script src="../react/browser.min.js"></script>
<script src="../react/redux.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
Redux.fun=function(o){
return function(state,action){
if(action.type=="@@redux/INIT"){
return o.data;
}else{
return Object.assign({},state,o.mutations[action.type](state));
}
}
}
var store=Redux.createStore(Redux.fun({
data:{
name:"veb",
age:20
},
mutations:{
changeName(state){
return {
name:"len"
}
},
changeAge(state){
return{
age:state.age+1
}
}
}
})
)
function changeName(){
store.dispatch({
type:"changeName"
})
}
function changeAge(){
store.dispatch({
type:"changeAge"
})
}
var C=React.createClass({
render:function(){
return <h1>{store.getState().name}年龄是{store.getState().age}</h1>;
}
})
function render(){
ReactDOM.render(
<div>
<C/>
<button onClick={changeName}>changeName</button>
<button onClick={changeAge}>changeAge</button>
</div>,
document.getElementById("app")
)
}
render();
store.subscribe(render);
</script>
</html>
在初始化的
dispatch时,action的值为@@redux/INIT
网友评论