react redux

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'));

})