react系列--redux
2017-09-19 本文已影响89人
Veb
redux本身与react没有任何关系，只是一个状态管理机制，接下来会从基础使用开始展示，希望可以大家可以有所收获！
react最近占据IT新闻头条，不过为了同学们更好的学习，还是把这篇文章写出来吧！
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'
