基于dva重写投票案例

voteModel.js

JavaScript

import _ from '../utils/utils';
const delay = (interval = 1000) => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, interval);
    });
};

export default {
    namespace: 'vote',
    state: {
        supNum: 10,
        oppNum: 5
    },
    reducers: {
        support(state, action) {
            state = _.clone(true, state);
            let { payload = 1 } = action;
            state.supNum += payload;
            return state;
        },
        oppose(state, action) {
            state = _.clone(true, state);
            let { payload = 1 } = action;
            state.oppNum += payload;
            return state;
        }
    },
    effects: {
        supportAsync: [
            function* ({ payload }, { call, put }) {
                yield call(delay, 2000);
                yield put({
                    type: 'support',
                    payload
                });
            },
            { type: 'takeLatest' }
        ],
        opposeAsync: [
            function* opposeAsync({ payload }, { call, put }) {
                yield call(delay, 2000);
                yield put({
                    type: 'oppose',
                    payload
                });
            },
            { type: 'takeLatest' }
        ]
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Vote.jsx

jsx

import React from "react";
import styled from "styled-components";
import { Button } from 'antd';
import { connect } from 'dva';
// ...
const Vote = function Vote(props) {
    let { supNum, oppNum, dispatch } = props;
    return <VoteBox>
        <div className="header">
            <h2 className="title">React是很棒的前端框架</h2>
            <span className="num">{supNum + oppNum}</span>
        </div>
        <div className="main">
            <p>支持人数：{supNum}人</p>
            <p>反对人数：{oppNum}人</p>
        </div>
        <div className="footer">
            <Button type="primary"
                onClick={() => {
                    dispatch({
                        type: 'vote/supportAsync',
                        payload: 10
                    });
                }}>
                支持
            </Button>
            <Button type="primary" danger
                onClick={() => {
                    dispatch({
                        type: 'vote/opposeAsync'
                    });
                }}>
                反对
            </Button>
        </div>
    </VoteBox>;
};
export default connect(state => state.vote)(Vote);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

基于dva重写投票案例 #

基于dva重写投票案例