react系列--redux

redux本身与react没有任何关系，只是一个状态管理机制，接下来会从基础使用开始展示，希望可以大家可以有所收获！
react最近占据IT新闻头条，不过为了同学们更好的学习，还是把这篇文章写出来吧！

redux应用场景

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

1.引入文件

• index.html

    
    


    

    
    添加

• index.js

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

---

2.创建store

• index.js就变成了这个样子

function render(){
      var arr=[1,2,3,4];
      var str="";
      for(var i=0;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.监听变化，广播修改

• index.js

function render(){
      var arr=store.getState();
      var str="";
      for(var i=0;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"
      }
    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案例

更深层次的封装

在初始化的dispatch时, action的值以 '@@redux/INIT'开头