React ---用dva实现简单计数器

写在前面

最近这段时间在学习react，在掌握了一点点的基础知识之后，觉得dva真的很神奇，尤其是再经历redux-saga这么复杂的处理副作用后，所以我就开始琢磨dva，刚开始都是以最简单的计数器开始，我会大概的描述下我在做的过程中出现的问题。
我只是个react初学者，希望各位大神能对我多多指教，勿喷~

整体的话我是基于react脚手架，安装了dva的依赖包

我的目录结构大致是这样子的

最外层的test.js是组件层，models用来处理数据和逻辑

这里是models处理数据的具体代码

namespace表示在全局 state 上的 key关键字，不能有重复

state是初始值，这里我给他设置成，默认初始的0

effects用来处理副作用，处理异步操作

reducers等同于 redux 里的 reducer，接收 action，同步更新 state

export default {
    namespace:'test',
    state:0,
    effects:{
        
    },
    reducers:{
       add(state){
           return state+1
       },
       sub(state){
        return state-1
        },
        five(state,action){
            return state+action.payload
        }
    }
};

组件页面

import React, { Component } from 'react';
import {connect} from 'dva'
import { Button } from 'antd';
@connect(({test})=>({test}))
class Test extends Component {
    render() {
        console.log('this.props',this.props)
        console.log('count',this.props.test)
        return (
            <div>
                <h2>count</h2>  
                <div className="data_content">
                    <h2>{this.props.test}</h2>
                    <Button onClick={()=>this.props.dispatch({type:'test/add'})}>+1</Button>
                    <Button onClick={()=>this.props.dispatch({type:'test/sub'})}>-1</Button>
                    <Button onClick={()=>this.props.dispatch({type:'test/five',payload:5})}>+5</Button>
                </div>
            </div>
        );
    }
}
export default Test;

接下来的话主要还是为了提升自己的react基础知识，我会慢慢重新的学习react的相关知识，发表一些我做的简单的小案例，希望这样能促进自己的成长。