Solo  当前访客:0 开始使用

布丁与画家的博客

努力改变一小部分人解决问题的方式

dvaJs使用笔记01

2020-03-02 14:06:35 iwh718
0  评论    0  浏览

最近没有学习新的前端东西了,想想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.

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

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

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组件


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

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;


标题:dvaJs使用笔记01
作者:iwh718
地址:看看我的CSDN

web站点:骇客猫科技资讯



今日诗词
QQ交流群:914105779

标签

友链

存档

TOP