dva基本使用

• npm i dva dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架

// import React from 'react';
// import ReactDOM from 'react-dom';
import 'antd/dist/antd.less';


// 1.导入dva
import dva, { connect } from 'dva';

// 2.创建实例对象
let app = dva();

// 2-1 定义model
let homeModel = {
  //当前model命名空间名称,区分不同的model
  namespace: 'home',
  // 数据仓库
  state: {
    count: 0
  },
  // 指定当前命名空间保存的reducer
  reducers: {
    // reducer中key作用,类型
    // {type: add, payload: xxx}
    add: (state, action) => {
      return {count: state.count + action.count}
    },
    sub: (state, action) => {
      return {count: state.count - action.count}
    }
  }
}

// 2-2 告诉dva需要使用哪个model
app.model(homeModel);



// 定义组件
function Home(props) {
  return (
    <div>
      <p>{ props.count }</p>
      <button onClick={() => {props.increment()}}>+</button>
      <button onClick={() => {props.decrement()}}>-</button>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {count: state.home.count}
}

const mapDispatchToProps = (dispatch) => {
  return {
    increment() {
      dispatch({type: 'home/add', count: 1})
    },
    decrement() {
      // 派发到 home下的sub
      dispatch({type: 'home/sub', count: 1})
    }
  }
}

// 把 state 和 dispatch 关联到对应组件上的 props
const AdvHome = connect(mapStateToProps, mapDispatchToProps)(Home);
// 3.定义组件
// import App from './App';
function App() {
  return (
    <div>
      <AdvHome />
    </div>
  )
}

// 4.注册路由表,告诉dva 需要渲染哪个组件
// 回调函数返回的值就是需要渲染的组件
app.router(() => <App />);

// 5.启动dva,渲染到id为root标签里
app.start('#root');