react+dva的简单使用

react + dva基本配置

src/index.js 文件

import dva from 'dva';
import router from './router/index';
import { createBrowserHistory } from "history";
import store from './store/index.js';
const app = dva({
  history:createBrowserHistory() // histore信息
});
store(app); //路由挂载
app.router(router); // 路由挂载
app.start('#root'); 

dva 的写法

export default {
    //命名空间
    namespace: 'home',
    //仓库初始化状态
    state: {
        num:1
    },
    reducers: {
        num(state, { type, operator }) {
            let num = state.num;
            if(operator==='+'){
                console.log(state.num)
                num++
            }else if(operator==='-'){
               num--
            }
            return {
                ...state,
                num: num
            }
        }
    },
    effects: {
       *upnum(action,{put,call}){
            yield put({ type: 'num',operator:action.operator})//此处type对应reducers中的函数名
       },
    }
}

使用方法

import React, { Component } from 'react'
import {connect} from 'dva';
class index extends Component {
    count(operator){
        this.props.dispatch({type:'home/upnum',operator})//type=> home对应store中的namespace,upnum对应store中reducers或effects下的函数名
    }
    render() {
        const {num} = this.props;
        return (
            <div>
                <button onClick={()=>this.count('-')}>-</button>{num}<button onClick={()=>this.count('+')}>+</button>
            </div>
        )
    }
}
export default connect(store=>store.home)(index)

详细案例地址：https://github.com/Lzqsv/react-dva