dva中Model处理

入口

jsx

import voteModel from './models/voteModel';
...
app.model(voteModel);
...

1
2
3
4

基本结构

JavaScript

export default {
    // 命名空间「模块名：后期获取状态和派发都需要这个名字」
    namespace: 'vote',
    // 此模块管理的公共状态
    state: {},
    // 此模块需要判断的reducer「同步派发直达reducers」
    reducers: {},
    // 此模块需要异步派发的任务「基于redux-saga语法处理」
    effects: {},
    // 订阅方法，一开始就自动执行「获取数据，实现派发等」
    subscriptions: {}
};

1
2
3
4
5
6
7
8
9
10
11
12

实现计数器累计 Demo.jsx

jsx

import React from "react";
import styled from "styled-components";
import { connect } from 'dva'
import { Button } from 'antd';
...
const Demo = function Demo(props) {
    let { num, dispatch } = props;
    return <DemoBox>
        <span className="num">{num}</span>
        <Button type="primary"
            onClick={() => {
                dispatch({
                    type: "demo/increment",
                    payload: 5
                });
            }}>
            按钮
        </Button>
        <Button type="primary" danger
            onClick={() => {
                dispatch({
                    type: 'demo/incrementAsync',
                    payload: 10
                });
            }}>
            异步按钮
        </Button>
    </DemoBox>;
};
export default connect(state => state.demo)(Demo);

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

demoModel.js

JavaScript

import _ from '../utils/utils';
const delay = (interval = 1000) => {
    ...
};
export default {
    namespace: 'demo',
    state: {
        num: 0
    },
    reducers: {
        increment(state, action) {
            state = _.clone(true, state);
            let { payload = 1 } = action;
            state.num += payload;
            return state;
        }
    },
    effects: {
        *incrementAsync({ payload }, { call, put }) {
            yield call(delay, 2000);
            yield put({
                type: 'increment',
                payload
            });
        }
    }
};

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

effects中的特殊处理

JavaScript

effects: {
    incrementAsync: [
        function* ({ payload }, { call, put, select }) {
            try {
                // 获取状态
                let { num } = yield select(state => state.demo);
                // 发送请求
                yield call(delay, 2000);
                // 派发任务
                yield put({
                    type: 'increment',
                    payload
                });
            } catch (err) {
                // 异常捕获
                console.log(err);
            }
        },
        // 指定监听的类型，默认是takeEvery「还有：takeLatest、throttle等」
        { type: "takeLatest" },
        // { type: "throttle", ms: 1000 }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

subscriptions

JavaScript

app.model({
    subscriptions: {
        setup({ dispatch, history }) {
            history.listen(location => {
                if (location.pathname === '/demo') {
                    dispatch({
                        type: 'demo/increment',
                        payload: 100
                    });
                }
            });
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

dva中Model处理 #

入口 #

基本结构 #

dva中Model处理

入口

基本结构