精华内容
参与话题
问答
  • DvaJS

    2019-12-06 12:17:48
    Dva是什么? 基于redux和redux-saga的数据流方案,只有6个api。 数据流走向 ...State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值),每一个 Model 会有一个命名空间,它的 state...

    Dva是什么?

    基于 redux 和 redux-saga 的数据流方案,只有6个api。

    数据流走向

     

     

    数据流向图解析:

    State

    State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值),每一个 Model 会有一个命名空间,它的 state 都是唯一的。

    dispatch 函数

    用于触发 action 的函数,先使用 connect 链接 Models , 在组件的 props 中能得到 dispatch。dispatch 是一个函数,该函数规定第一个参数就是 action。需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。

    Action

    action 是一个对象,里面通常写有 type 属性和 payload 属性。它是改变 State 的唯一途径。 如果要发起一个 action 需要使用 dispatch 函数;


    type 属性指明具体的行为( model 中的 effects 中的 函数),type 属性的值是 model 中的 namespace 和 model 中的 effects 中的 函数 或者 reducers 中的函数。 namespace/effects_func   or  namespace/reducers_func。

    action 的 payload 属性的值是传递给 model 中的 effects 中的 函数的参数。

    下面看一下 deispatch 和 action 使用的代码示例:

    
    import React, { Component } from 'react';
    import {connect} from 'dva';
    @connect(({loadding,demo_models})=>({
      demo_models
    }))
    class demo extends React.Component {
      dispatch =this.props.dispatch;
      dispatch({
        type: 'user/add', // 如果在 model 外调用,需要添加 namespace
        payload: {}, // 需要传递的信息
      });
      render() {
        return (<div>1</div>)
      }
    }
    export default demo;

    Reducer

    Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

    reducers 中的函数接收两个参数:当前model 中的 state 和 当前函数对象的this。

    在视图调用 reducers 中的函数

      // 页面初次渲染函数
      componentDidMount(){
        this.dispatch({
          type:'a_models/aa',
          payload:{
            channelId:'sichuantelecom',
          },
          callback:(res)=>{
            console.log('---------',res)
            console.log('---------',this.state)
          }
        });
        setTimeout(()=> {
            console.log('---------',this.state)
        }, 1000);
        return
        this.httpTodayList();
        this.httpTodayData();
      };

    model 代码:

    
    const Model = {
      namespace: 'a_models',//唯一命名
      state: {
      },
      effects: {
      },
      reducers: {
        aa(payload,item ){
         console.log('==========',payload,item)
         item.callback(item.payload);
         return {...payload}
        },
        save(state, { payload }) {
          return { ...state, ...payload};
        },
      },
    };
    export default Model;
    

    输出结果:

     

     

     

     

     

     

     

     

     

     

    展开全文
  • dvajs

    2017-09-17 23:40:00
    2019独角兽企业重金招聘Python工程师标准>>> ...

    1. https://github.com/dvajs/dva/blob/master/README_zh-CN.md
    2. https://github.com/dvajs/dva-knowledgemap dvajs知识图谱
    3. 实战dvajs CRUD。会phpstorm/webstorm打开工程时记得先安装 cnpm i webstorm-disable-index

     

        3.ES6(EMSscript 2015) 新特性介绍

        4.React

    转载于:https://my.oschina.net/swingcoder/blog/1538862

    展开全文
  • dvaJS项目配置less

    万次阅读 2019-06-04 22:19:22
    在.webpackrc或者.webpackrc.js文件里添加 disableCSSModules: true, 我们写一个less文件并且用上less的语法看看我们配置成功了没有。 现在我们已经发现我们已经配置成功了,可以happy的写less语法了!...

    在.webpackrc或者.webpackrc.js文件里添加

    disableCSSModules: true,
    

    在这里插入图片描述
    我们写一个less文件并且用上less的语法看看我们配置成功了没有。
    在这里插入图片描述
    现在我们已经发现我们已经配置成功了,可以happy的写less语法了!
    在这里插入图片描述

    展开全文
  • react与dvaJS更改host与port

    万次阅读 2019-07-29 11:13:43
    如果你的项目是dvajs脚手架创建的,那么更改port与host就要在package.json里面去更改,如下图: 上图是改变host,如果是改port的话就是set PORT=3000&&roadhog 如果你是纯react项目的话: 在scripts文件夹...
    如果你的项目是dvajs脚手架创建的,那么更改port与host就要在package.json里面去更改,如下图:

    在这里插入图片描述
    上图是改变host,如果是改port的话就是set PORT=3000&&roadhog

    # OS X, Linux
    $ PORT=3000 roadhog server
    
    #Windows(cmd.exe)
    $ set PORT=3000&&roadhog server
    
    # Or use cross-env for all platforms
    $ cross-env PORT=3000 roadhog server
    

    还可配置环境变量临时配置一些参数,包括:

    • PORT,端口号,默认8000
    • HOST,默认localhost
    • HTTPS,是否开启https,默认关闭
    • BROWSER,设为none时不自动打开浏览器
    • CLEAR_CONSOLE,设为none时清屏
    如果你是纯react项目的话:

    在这里插入图片描述
    在scripts文件夹下的start.js文件中更改

    展开全文
  • Dvajs介绍

    2019-07-29 17:41:28
    dva 是基于 redux 最佳实践 实现的 framework,简化使用 redux 和 redux-saga 时很多繁杂的操作 数据流向 数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候...
  • dvaJS配置antd以及按需引入

    万次阅读 2019-06-06 07:20:38
    首先通过npm || cnpm || yarn等方式在项目目录安装antd 和 babel-plugin-import。 babel-plugin-import是用来按需加载antd的脚本和样式的。 $ npm install antd babel-plugin-import -S 编辑 .webpackrc文件,使 ...
  • dvaJS安装以及脚手架生成的目录讲解

    万次阅读 2019-06-05 23:14:06
    首先我们要安装dva-cli $ npm install dva-cli ...而后我们就可以使用dva-cli来快速生成dvaJS项目结构了 在命令行dva new yourProjectName 而后当它问你Do you insist on using dva-cli?(y/N)的时候输入 y,回车 就...
  • dvaJS项目使用typescript教程

    万次阅读 2019-08-10 15:00:41
    现在typescript越来越火了,各种项目都会用到typescript,我们今天就来说一下dvajs项目如何使用typescript(此文为CSDN吴小迪所写,翻版请说明来处): (本文默认dvajs的东西都弄好并可以启动了,如果未配置dvajs的...
  • DvaJS的Router以及路由跳转

    万次阅读 2019-08-04 22:11:56
    Route Components Route Components是指 ./src/routes/ 目录下的文件,它们是 ./src/router.js 里匹配的 Component。 通过connect绑定数据 比如: import { connect } from 'dva'; function App() {} ...
  • DvaJS 入门, 快速上手Dva

    千次阅读 2019-11-14 16:43:59
    为什么要使用Dva? React 没有解决的问题 React 本身只是一个 DOM 的抽象层,使用组件构建虚拟 DOM。 如果开发大应用,还需要解决一个问题。 ...通信:组件之间如何通信?... 数据流:数据如何和视图串联起来?...
  • DvaJS的Effect使用介绍

    万次阅读 2019-08-04 18:51:19
    很多朋友使用dvajs不知道这个Effect是用来干嘛的,今天我们就一起来使用一下: 示例: app.model({ namespace: 'todos', effects: { *addRemote({ payload: todo }, { put, call }) { yield call(addTodo, ...
  • DvaJS的Subscription的使用

    万次阅读 2019-08-04 21:57:30
    简介: subscriptions是订阅,用于订阅一个数据源,然后根据需要dispatch相应的action。数据源可以是当前的时间、服务器的websocket连接、keyboard输入、geolocation变化、history路由变化等等。...

空空如也

1 2 3 4 5 ... 18
收藏数 350
精华内容 140
关键字:

dvajs