2018-08-09 17:02:53 iceking66 阅读数 4208

  dva react中的effects 获取model state数据

 

effects: {
 * query ({ payload }, { select, call, put }) {
   const stateArr = yield select(state => state)
   console.log(stateArr)
 },
},

 

2019-05-29 19:17:26 qq_33559093 阅读数 828

先初始化一个react native的项目

npm install -g yarn react-native-cli

react-native init AwesomeProject

准备安装dva 、react-navigation

1.yarn add  dva-core

2.yarn add react-redux

3.yarn add react-navigation

4.yarn add react-native-gesture-handler

5.react-native link react-native-gesture-handler

然后是集成步骤

1.集成dva,使用dva-core和react-redux,新建app文件夹

app文件夹中新建.root.js

import * as React from 'react';
import indexModel from './models/index'
import { Provider  } from 'react-redux';
import App from './routes'//    这个是react-navigation路由文件

import { create } from 'dva-core';

const models = [indexModel];

const app = create(); // 创建dva实例,可传递配置参数。https://dvajs.com/api/#app-dva-opts

models.forEach((o) => { // 装载models对象
  app.model(o);
});

app.start(); // 实例初始化

const store = app._store; // 获取redux的store对象供react-redux使用

export default class Container extends React.Component {
  render() {
    return (
      <Provider store={store}>//    注入dva
        <App/>
      </Provider>
    );
  }
}

2.编写路由,react-navigation

app文件夹下新建routes.js

import React, { PureComponent } from 'react'
import {
  TabBarBottom, addNavigationHelpers, createSwitchNavigator,
  createBottomTabNavigator, createStackNavigator, createAppContainer
} from 'react-navigation'
import AuthLoadingScreen from './components/loading/index'
import {StatusBar, View, Platform} from "react-native";

import Home from './pages/Home/Home'
import Order from './pages/Order/Order'
import Get from './pages/Get/Get'
import Register from './pages/Register/index'
import Establish from './pages/Establish/index'
import Restore from './pages/Restore/index'

const AuthStack = createStackNavigator(
  {
    Register: Register,
    Establish: Establish,
    Restore: Restore
  },
);
const HomeNavigator = createBottomTabNavigator(
  {
    Home: { screen: Home },
    Order: { screen: Order },
    Get: { screen: Get }
  }
);

const AppNavigation = createSwitchNavigator(
  {
    App: HomeNavigator,
    Auth: AuthStack,
    AuthLoading: AuthLoadingScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const App = createAppContainer(AppNavigation);

export default App

3.链接项目

根目录下的index.js

import {AppRegistry} from 'react-native';
import App from './app/root';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

最后,如何在组件中使用dva,点我的另外一篇文章----->点这里

2017-07-10 14:47:44 weiyongliang_813 阅读数 3637

昨天才用create-react-app创建了react的开发环境,以为今后就用它来创建开发环境咯,谁知道才用了一天,才发下dva也是用来创建react开发环境的。
dva是淘宝团队弄的,为了支持国货,赶紧试试看咋用吧
第一步:安装 dva-cli

cnpm install dva-cli -g

第二步:采用dva来创建项目:

dva new react_two
cd react_two

用webstorme打开react_two项目:文件解构大概如下:
这里写图片描述

第三步:npm start 启动起来访问路径:http://localhost:8000/ 界面效果如下:

这里写图片描述

我个去哦,界面效果跟用create-react-app创建的工程的界面效果基本一样。
其实原理跟create-react-app里创建工程的react-scripts原理基本一样,在此就不分析咯,其实就是换汤不换药而已。

2019-12-26 16:05:01 baidu_41604826 阅读数 16

所谓CDN缓存

已经放在服务器的项目,如果做了调整重新打包上传之后发现,不会及时更新,刷新没用,必须清除缓存才有用。就是因为CDN缓存,这个缓存的存在是为了减轻服务器的请求压力,但是无疑也造成了困扰,怎么结局?
调整配置文件:此处是使用dva+react,使用的打包工具是roadhog,所以调整.webpackrc文件
1.添加配置:

 "hash": true,
  "html": {
    "template": "./src/index.ejs"
  },

2:创建index.ejs文件,内容等同public中的Index.html
3:打包之后会发现每个js文件都会后缀一个随机数,而且当修改了某个文件之后,对应的文件随机数也会变更,重新上传之后,资源名字有差异,就会请求新的数据,就达到加载最新数据的目的
在这里插入图片描述

2017-09-27 10:24:17 qq_28008615 阅读数 1062

之前在工作中使用了了react+redux。近来发现有个叫dva的东西出来。所以用自己能理解的解释下

dva是什么东东

基于 redux、redux-saga 和 react-router 的轻量级前端框架


特性

  • 易学易用:仅有 6 个 api,对 redux 用户尤其友好
  • elm 概念:通过 reducers, effects 和 subscriptions 组织 model
  • 支持 mobile 和 react-native:跨平台 (react-native 例子)
  • 支持 HMR:目前基于 babel-plugin-dva-hmr 支持 components、routes 和 models 的 HMR
  • 动态加载 Model 和路由:按需加载加快访问速度 (例子)
  • 插件机制:比如 dva-loading 可以自动处理 loading 状态,不用一遍遍地写 showLoading 和 hideLoading
  • 完善的语法分析库 dva-ast:dva-cli 基于此实现了智能创建 model, router 等
  • 支持 TypeScript
  • -

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。
这里写图片描述

Models

State

type State = any

State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

在 dva 中你可以通过 dva 的实例属性 _store 看到顶部的 state 数据,但是通常你很少会用到:

const app = dva();
console.log(app._store); // 顶部的 state 数据

Action

type AsyncAction = any

Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。

dispatch({
  type: 'add',
});

dispatch 函数

type dispatch = (a: Action) => Action

dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。

在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者 Effects,常见的形式如:

dispatch({
  type: 'user/add', // 如果在 model 外调用,需要添加 namespace
  payload: {}, // 需要传递的信息
});

Reducer

type Reducer<S, A> = (state: S, action: A) => S

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

Reducer 的概念来自于是函数式编程,很多语言中都有 reduce API。如在 javascript 中:

[{x:1},{y:2},{z:3}].reduce(function(prev, next){
    return Object.assign(prev, next);
})
//return {x:1, y:2, z:3}

在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用immutable data,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。

Effect

Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。

dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读Mostly adequate guide to FP,或者它的中文译本JS函数式编程指南。[个人觉得类似于jsonp主要处理数据是异步的]

Subscription

Subscriptions 是一种从 源 获取数据的方法,它来自于 elm。

Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent(dispatch) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

Router

这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 History API 可以监听浏览器url的变化,从而控制路由相关操作。

dva 实例提供了 router 方法来控制路由,使用的是react-router。

import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

Route Components

在组件设计方法中,我们提到过 Container Components,在 dva 中我们通常将其约束为 Route Components,因为在 dva 中我们通常以页面维度来设计 Container Components。

所以在 dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)。


一般目录下

“`bash
├── /dist/ # 项目输出目录
├── /src/ # 项目源码目录
│ ├── /components/ # UI组件及UI相关方法
│ │ ├── skin.less # 全局样式
│ │ └── vars.less # 全局样式变量
│ ├── /routes/ # 路由组件
│ │ └── app.js # 路由入口
│ ├── /models/ # 数据模型
│ ├── /services/ # 数据接口
│ ├── /themes/ # 项目样式
│ ├── /mock/ # 数据mock
│ ├── /utils/ # 工具函数
│ │ ├── config.js # 项目常规配置
│ │ ├── menu.js # 菜单及面包屑配置
│ │ ├── config.js # 项目常规配置
│ │ ├── request.js # 异步请求函数
│ │ └── theme.js # 项目需要在js中使用到样式变量
│ ├── route.js # 路由配置
│ ├── index.js # 入口文件
│ └── index.html
├── package.json # 项目信息
├── .eslintrc # Eslint配置
└── .roadhogrc.js # roadhog配置

dva+react+antd

阅读数 491

react环境搭建(基于dva)

博文 来自: Asuran18

react-dva 笔记

阅读数 20

没有更多推荐了,返回首页