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

先初始化一个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-11-17 09:10:38 Apache012 阅读数 491

dva 是一个基于 react 和 redux 的轻量应用框架,redux步骤繁杂,更容易出错,搭建成本更高。

这个博客地址可以算是第一个dva+react+antd程序,但是它出来没有样式

http://www.cnblogs.com/yuanyuan0809/p/7171761.html



需要在src/router.js添加

import 'antd/dist/antd.css';

2019-05-31 16:46:49 q2235141 阅读数 20

一、什么是dva

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。dva 是 react 和 redux 的最佳实践。最核心的是提供了 app.model 方法,用于把 reducer, initialState, action, saga 封装到一起。官网 dva = React-Router + Redux + Redux-saga

二、安装

1.安装 dva-cli

npm install dva-cli -g

2.扎到安装项目的目录

cd ylz_project/my_reactdemo

3.创建项目:Dva-test项目名

dva new Dva-test

4.进入项目

cd Dva-test

5.启动项目

npm start

三、项目结构

在这里插入图片描述

四、dva数据流程图

在这里插入图片描述

五、Model

model 是 dva 中最重要的概念,Model 非 MVC 中的 M,而是领域模型,用于把数据相关的逻辑聚合到一起,几乎所有的数据,逻辑都在这边进行处理分发

  • 属性说明

namespace: 当前 Model 的名称。整个应用的 State,由多个Model 的 State 以 namespace 为 key 合成

state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出

reducers: Action 处理器,处理同步动作,用来算出最新的 State

effects:Action 处理器,处理异步动作

subscription:订阅state

1.state

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

// dva()初始化
const app = dva({
  initialState: { count: 1 },
});
 
// modal()定义事件
app.model({
  namespace: 'count',
  state: 0,
});
 
//初始值,我们在 dva() 初始化的时候和在 modal 里面的 state 对其两处进行定义,其中  modal 中的优先级低于传给  dva() 的  opts.initialState

2.action / dispatch

Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。表示操作事件,可以是同步,可以是异步

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

3.reducer

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

//state的值
const initState = {
	users:{},//用户信息
}
 
//1 reducer 函数
export function chat(state=initState, action){
	switch(action.type){
		case USER_LIST:
			return {...state,users:action.payload.users}
		default:
		 	return state
	}
}

4.Effect

用于处理异步操作和业务逻辑,不直接修改 state,简单的来说,就是获取从服务端获取数据,并且发起一个 action 交给 reducer 的地方,基于 Redux-saga 实现。

1.put
用于触发 action 。
yield put({ type: 'todos/add', payload: 'Learn Dva' })
 
2.call
用于调用异步逻辑,支持 promise 。
const result = yield call(fetch, '/todos')
 
3.select
用于从 state 里获取数据。
const todos = yield select(state => state.todos)

5.subscription

subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、当前页面的url、服务器的 websocket 连接、history 路由变化等

  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === '/users') {
              dispatch({
                type: 'users/fetch',
              })
        	}
      })
    }
  }
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原理基本一样,在此就不分析咯,其实就是换汤不换药而已。

2017-12-28 16:39:39 bbsyi 阅读数 2819

 

作者:zhenhua-lee
链接:https://www.zhihu.com/question/51831855/answer/225446217
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  1. 框架: dva是个框架,集成了redux、redux-saga、react-router-redux、react-router
  2. 快速初始化: 可以快速实现项目的初始化,不需要繁琐地配置
  3. 简化开发:将initState、saga、reducer集成到一个model里面统一管理,避免文件散落在各个文件里面,便于快速查找与开发
  4. 简洁的API:整个项目中只有dva、app.model、app.router、app.use、app.start几个API
  5. 无缝对接:跟react的生态没有冲突,例如可以直接使用redux devtool工具
  6. 动态机制:app.start以后,仍然可以注册model,灵活性较高

再说说个人觉得不太爽的地方吧:

  1. namespace不统一: dva中的action.type格式是namespace/XXX,且在model中不需要添加前缀namespace,但是在组件中dispatch,却需要添加prefix
  2. action问题:action会散落在两个地方,一个是saga里面,另外一个是component dispatch的时候,当然这个问题在使用redux-saga的时候就会存在,只是dva仍然没有很好地统一起来。

 

dva+react+ant.design

阅读数 1062

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