dvaJs使用笔记01

最近没有学习新的前端东西了，想想redux都忘完了，干脆用dva算了．

dva是react全家桶集合版吧算是．研究了一下．搭建流程和使用都比redux简化很多．内置了router,redux等一堆．

安装脚手架

npm install dva-cli -g

新建项目

dva new project

dva的基本流程和redux一样，也是action触发reducers改变store的数据，不过流程简化很多．其中redurces和store都在model里面．

比较留心的是生成器函数：effect里面有put和call,select,，内部可以用yield 关键字，put如果调用同步的reducers是阻塞的．call执行异步任务，select是获取state.

实例代码：用户管理删除操作

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
import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva({
　//给model里面的数据初始化，这里用的model叫demo_data
    initialState: {
　　　//给namespace为demo_data初始化值
        demo_data: {
         userList:   [
                { name: 'dva', id: 1 },
                { name: 'antd', id: 2 },
            ]
        },
    }
});

// 2. Plugins 中间件与插件
// app.use({});

// 3. Model 加载模型
app.model(require('./models/example').default);

// 4. Router　加载路由
app.router(require('./router').default);

// 5. Start　选择挂载点
app.start('#root');

model

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
import request from "../utils/request";

export default {
//这个是redux里面的reducers名字
  namespace: 'demo_data',
//获取demo_data就等同于state，比如初始化那段代码
  state: {
    userList: []
  },
//这里是订阅数据，可以自动触发一些action
  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },
//异步reducers
  effects: {
    
    *deleteUserAsync(action, { put, call }) {
      
      let t = ()=>request('https://www.baidu.com',{mode:'no-cors'})
     let re = yield call(t);
     console.log(re)
      yield put({ type: 'deleteUser', payload: action.payload });
      console.log('end')

    }
  },
//同步reducers
  reducers: {

    deleteUser(state, { payload: id }) {
      console.log('sync...')
      return { userList: (state.userList.filter(item => item.id !== id)) };
    },
  },

};

User组件

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
53
54

import { Fragment } from "react";
import { connect } from 'dva';
import { Table, Popconfirm, Button } from 'antd';
const User = ({ dispatch,demo_data}) => {
    console.log(demo_data)
    const columns = [{
        title: '用户名',
        dataIndex: 'name',
    }, {
        title: '操作',
        render: (text, record) => {
            return (
                <Popconfirm title="Delete?" onConfirm={() => {
                    dispatch({
                        type: 'demo_data/deleteUser',
                        payload: record.id,
                    })
                }}>
                    <Button>删除</Button>
                </Popconfirm>
            );
        },
    },
    {
        title: '异步操作',
        render: (text, record) => {
            return (
                <Popconfirm title="Delete?" onConfirm={() => {
                    dispatch({
                        type: 'demo_data/deleteUserAsync',
                        payload: record.id,
                    })
                }}>
                    <Button>异步删除删除</Button>
                </Popconfirm>
            );
        },
    }];
    return (
        <Fragment>
            <Table
                dataSource={demo_data.userList}
                columns={columns}
                
            />
        </Fragment>
    )


}


export default connect(({ demo_data }) => ({ demo_data }))(User);

router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import User from './components/User';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
       
        <Route path="/"  exact component={User} />
         <Route path="/welcome" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;