react redux

爱被打了一巴掌 2021-07-25 02:30 365阅读 0赞

redux
    
    	store:数据仓库,保存数据的地方
    	state:一个对象,数据库里的所有数据都放到一个state
    	action:一个动作,触发数据改变的方法,包含dispacth传入数据,action.键名获取
    	dispatch:将动作触发方法
    	reducer:一个函数,获取动作,改变数据,生成一个新的状态,从而改变页面
    
    	安装
    	cnpm install redux --save
    	引入
    	import Redux,{createStore} from 'redux'
    	
    	1、创建仓库
    	//state为初始数据,通过action内的参数来做逻辑判断，改变state
    	const reducer=function(state={num:0},action)
    	{
    	  //对动作选择
    	  switch(action.type)
    	  {
    	    case "add":
    	      state.num++;
    	      break;
    	    case "substract":
    	      state.num--;
    	      break;
    	
    	  }
    	//返回新的状态,将数据解构,改变hash值
    	  return {...state}
    	}
    		
    	const store=createStore(reducer)
    
    	2、创建方法,使用dispatch修改/传入数据
    	
    		function xx()
    		{
    		  //通过仓库的方法dispatch触发方法,传入{键值对到action里}
    		     store.dispatch({type:'substract',xx})
    		}
    	
    	3、将方法绑定事件,从而通过事件可以利用dispatch修改action的内容
    	
    	4、组件中获取最终数据
    		let xx=store.getSate()
    		xx.state中的键名
    	
    	5、监听事件改变state,并每次重新渲染页面
    	store.subscribe(()=>{
    		ReactDOM.render(<组件名 />, document.getElementById('root'));
    		
    	})

代码示例:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import Redux,{ createStore} from 'redux'
    //仓库,函数获取动作,改变状态,返回新的状态
    const reducer=function(state={ num:0},action)
    { 
      //对动作选择
      switch(action.type)
      { 
        case "add":
          state.num++;
          break;
        case "substract":
          state.num--;
          break;
    
      }
    //返回新的状态,将数据解构,改变hash值
      return { ...state}
    }
    //创建仓库,仓库是一个函数
    const store=createStore(reducer)
    
    function add()
    { 
        //通过仓库的方法dispatch触发方法
        store.dispatch({ type:'add',content:'hello'})
    }
    function substract()
    { 
      //通过仓库的方法dispatch触发方法
         store.dispatch({ type:'substract'})
    }
    
     class Counter extends React.Component
    { 
    	//获取数据
    
    render(){ 
    		let state=store.getState()
      return(
        <div>
    
        	
    
          <h1>计数器:{ state.num}</h1>
    
          <button onClick={ add}>计数+1</button>
          <button onClick={ substract}>奇数-1</button>
        
        </div>
        )
    }
    }
    ReactDOM.render(<Counter />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();
    
    //监听数据变化并渲染
    store.subscribe(()=>{ 
    ReactDOM.render(<Counter />, document.getElementById('root'));
    
    })