react系列--redux

index

react系列--redux __veblen

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

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