react系列--redux react系列--redux

index
react系列--redux __veblen

redux本身与react没有任何关系，只是一个状态管理机制，接下来会从基础使用开始展示，希望可以大家可以有所收获！

redux应用场景

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

1.引入文件

index.html
Document - 锐客网
index.js

function render(){ var arr=[1,2,3,4]; var str=""; for(var i=0; i"+arr[i]+"

"
}
list.innerHTMl=str;

}
render();

2.创建store

index.js就变成了这个样子

function render(){ var arr=[1,2,3,4]; var str=""; for(var i=0; i"+arr[i]+"

"
}
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.监听变化，广播修改

【react系列--redux】index.js

function render(){ var arr=store.getState(); var str=""; for(var i=0; i"+arr[i]+"

"
}
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[i]+"

"
}
 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
})
}