react系列--redux

2018-07-17 本文已影响30人 veb001

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

react系列--redux

react系列--redux __veblen

redux应用场景

1.引入文件

2.创建store

3.监听变化，广播修改

4.怎么去触发更改呢？（store.dispatch()）

5.最后附上react案例

更深层次的封装

猜你喜欢

热点阅读