Dva应用框架

// 1.导入dva
// 因为dva里面内置了react-router,react,react-Dom,react-saga,react-redux,因此这些都再次导入
import dva,{connect} from 'dva'
// 2.创建实例对象
let app  =  new dva();
let homeModel = {
  // 指定命名空间区分不同的model
  namespace:'home',
  // 保存state中的数据
  state: {
    count: 666
  },
  // 相当于react-reducer，保存当前命名空间的一个reducer
  reducers:{
    // add是key，相当于一个type
    // {type:Add, playload}
    add:(state,action)=>{
      return { count: state.count + action.count }
    },
    sub:(state,action)=>{
      return { count: state.count - action.count }
    }
  }
}
const mapStateToProps = (state) =>{
  return{count: state.home.count}
}
const mapDispatchToProps = (dispatch) =>{
  return {
    increment(){
      dispatch({type:"home/add",count:1})
    },
    decrement(){
      dispatch({type:"home/sub",count:1})
    }
  }
}
const AdvHome = connect(mapStateToProps,mapDispatchToProps)(Home)
//3.定义组件
function Home(props){
  return(
    <div>
      Home
      <p>{props.count}</p>
      <button onClick={()=>props.increment()}>增加</button>
      <button onClick={()=>props.decrement ()}>减少</button>
    </div>
  )
}
function App(){
  return(
    <div>
      <AdvHome/>
    </div>
  )
}
// 4.注册路由表，告诉dva要渲染那个组件
app.router(()=><App/>);
// 相当于react-saga,使用model,告诉dva使用哪个model
app.model(homeModel)
//5.启动dva并且把它 渲染到index.html的root上
app.start('#root')