文档章节

react框架 Dva & Umi

o
 osc_y8yehimr
发布于 2019/03/20 16:13
字数 446
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

概念

image

// http://localhost:3000/

//models
import IndexPage from './routes/IndexPage';
import Products from './routes/Products';

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

//Router Component dispatch
const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};
connect(({ products }) => ({
  products,
}))(Products);


//models
export default {
    namespace: 'products',
    state: [],
    reducers: {
      'delete'(state, { payload: id }) {
        return state.filter(item => item.id !== id);
      },
    },
  };
  
 
//通过dva实现整个流程
const app = dva({
    initialState: {
      products: [
        { name: 'dva', id: 1 },
        { name: 'antd', id: 2 },
      ],
    },
});

// 2. Plugins
//app.use({});

// 3. Model
app.model(require('./models/products').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');


dva最简结构

umi 和 dva、roadhog 是什么关系?

image

简单来说,

roadhog 是基于 webpack 的封装工具,目的是简化 webpack 的配置
umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发
dva 目前是纯粹的数据流,和 umi 以及 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用,个人觉得 umi + dva 是比较搭的
// 创建应用
const app = dva();

// 注册 Model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    },
  },
});

// 注册视图
app.router(() => <ConnectedApp />);

// 启动应用
app.start('#root');

Umi 与 Dva

image


├── app.js //配置dva
├── assets
│   └── yay.jpg
├── global.css
├── layouts
│   ├── __tests__
│   │   └── index.test.js
│   ├── index.css
│   └── index.js
└── pages //页面即路由
    ├── $post
    │   ├── comments.js
    │   └── index.js
    ├── 404.js
    ├── __tests__
    │   └── index.test.js
    ├── document.ejs
    ├── index.css
    ├── index.js
    ├── products  // /products
    │   ├── index.js //接收products
    │   └── model.js //配置 /products的路由
    └── users
        └── $id$.js

//products/index.js 派发action
const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
      rowKey={record => record.id}
    />
  );
};

//接收initialState与dispatch
export default connect(({ products }) => ({
  products
}),(dispatch) => {
  return {
    onDelete: function handleDelete(id) {
      dispatch({
        type: 'products/delete',
        payload: id,
      });
    }
  }
})(ProductList)

//app.js配置dva
export const dva = {
    config: {
      onError(e) {
        e.preventDefault();
        console.error(e.message);
      },
      initialState: {
        products: [
          { name: 'dva', id: 1 },
          { name: 'antd', id: 2 },
        ],
      }
    },
    plugins: [
      require('dva-logger')(),
    ],
};
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

【软件工具篇02】使用Anki克服遗忘曲线

使用Anki克服遗忘曲线 艾宾浩斯遗忘曲线 百度百科:遗忘曲线由德国心理学家艾宾浩斯研究发现,描述了人类大脑对新事物遗忘的规律。人体大脑对新事物遗忘的循序渐进的直观描述,人们可以从遗...

osc_wobxrheh
3分钟前
0
0
面向对象的理解

面向对象的三大特性 封装 继承 多态 面向对象的七大原则 单一职责原则:每一个类应该专注于做一件事情。即高内聚,低耦合。类的功能要单一,体积不要过于庞大。 开闭原则:一个对象对扩展开发...

osc_2wq8ft8d
4分钟前
0
0
Laravel Redis分布式锁实现源码分析

首先是锁的抽象类,定义了继承的类必须实现加锁、释放锁、返回锁拥有者的方法。 namespace Illuminate\Cache;abstract class Lock implements LockContract{ use InteractsWithTime;...

osc_2jegjdnw
6分钟前
0
0
【HDFS篇03】HDFS客户端操作 --- 开发环境准备

存储越困难,提取越容易 HDFS客户端操作---开发环境准备 步骤一:编译对应HadoopJar包,配置Hadoop变量 步骤二:创建Maven工程,导入pom依赖 <dependencies><dependency><groupId>ju...

osc_ds5ni1ur
7分钟前
0
0
老板,来瓶辣椒酱

最近网剧《隐秘的角落》非常的火爆,结局反转让人难以预料,但前两天发生了一场堪比史诗级大片的纠纷,纠纷的结局反转让人大跌眼镜,估计是神编剧都写不出来那样的剧本...而引发这场纠纷最核...

osc_1loi8uc4
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部