DVA知识集合

react与dva

来自本人的博客园 :http://www.cnblogs.com/shaoshuai0305/

1.变量声明

const DELAY = 1000

let count = 0
count = count + 1

2. 模板字符串

const user = 'world'
console.log(`hello ${user}`)

// 多行

const content = `
    hello ${user}
    thanks for you ${user}
`
console.log(content)

3. 默认参数


function logActivity(activity = 'skiing'){
    console.log(activity)
}

logActivity() ;// skiing

4. 箭头函数

[1, 2, 3].map(x => x + 1) // [2,3,4]

// 等同于

[1, 2, 3].map((function(x) {
   return x + 1;
}).bind(this));

5. 模块的Import 和 Export


 import dva from 'dva' 

 import {connect} from 'dva'

 import * as service from './services'

 export default App

 export class App extends Component{}

6. ES6对象和数组

6.1 析构赋值

// 对象
const people = {name:'kk',age:12}
const { name , age } = people
console.log(`${name}:${age}`)

// 数组
const arr = [1,2]
const [foo,bar] = arr
console.log(foo)

// 函数
const add = (state,{payload}) => {
    return state.concat(payload)
}

// alias别名
const plus = (state,{payload:todo}) => {
    return state.concat(todo)
}

6.2 对象字面量

const n = 'kk'
const a = 8

const u = {n , a}

// 定义对象的方法时,可省略去function

app.model({
    reducers:{
        add(){} // <=> add: function() {}
    },
    effects:{
        *addRemote() {} // <=> addRemote: function() {}
    }
})

6.3 展开符 Spread Operator

// 组装数组
const array = ['add']
// [...array,'remove']

// 获取部分项
function directions(first,...rest){
    console.log(rest)
}
console.log(directions('a','b','c'))

// 代替apply

function fun(x,y,z){
    console.log(y)
}
const args = [1,2,3]

fun.apply(null,args)
// 等同于
fun(...args)

// 合成新的object

const old = {
    a:1
}
const change = {
    b:2
}

const ret = {...old , ...change}

6.4 Promises


fetch('/api/todos')
    .then(res => res.json())
    .then(data => ({data}))
    .catch(err => ({err}))

// 定义promise
const delay = (timeout) => {
    return new Promise(resolve => {
        setTimeout(resolve,timeout)
    })
}

delay(1000).then(_ => {
    console.log('executed')
})

6.5 Generators 生成器

/*
概述:dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器,通过 yield 关键字实现暂停功能。
这是一个典型的 dva effect,通过 yield 把异步逻辑通过同步的方式组织起来。
*/

app.model({
    namespace:'todos',
    effects:{
        *addRemove({payload:todo},{put,call}){
            yield call(addTodo,todo)
            yield put({type:'add',payload:todo})
        }
    }
})

————————————————-重要内容—————————————————

7. React Component

7.1 组件定义的方式

函数

7.2 JSX

7.2.1 扩充组件的props

const attrs = {
    href : 'http://exm.org',
    target:'_blank'
}
<a {...attrs}>hello</a>

7.3 Props

7.3.1 propTypes
// 概念:由于js是弱类型语言,声明propTypes对props进行校验是有必要的

function App (props){
    return <div>{props.name}</div>
}

App.propTypes = {
    name:React.PropTypes.string.isRequired
}

7.4 Css Modules


.title {
  color: red;
}
:global(.title) {
  color: green;
}


//然后在引用的时候:
<App className={styles.title} /> // red
<App className="title" />        // green

7.5 classnames Package

/*
概念:在一些复杂的场景中,一个元素可能对应多个 className,而每个 className 又基于一些条件来决定是否出现。
这时,classnames 这个库就非常有用。
*/

import classnames from 'classnames'
const App = (props) => {
    const cls = (props) => {
        btn : true,
        btnLarge:props.type === 'submit',
        btnSmall:props.type === 'edit'
    }
    return <div classNames={cls}>
} 

//这样传入不同的type给App组件,就会返回不同的className组合
<App type='submit'/>
<App type='edit'/>

7.6 Reducer
// 增删改 以todo为例

app.model({
    namespace:'todos',
    state:[],
    reducers:{
        add(state,{payload:todo}){
            return state.concat(todo)
        },
        remove(state,{payload:id}){
            return state.filter(todo => todo.id !== id)
        },
        update(state,{payload:updatedTodo}){
            return state.map(todo=>{
                if(todo.id === updatedTodo.id){
                    return {...todo,...updatedTodo}
                }else{
                    return todo
                }
            })
        }
    }
})


// 嵌套数据的增删改

app1.model({
    namespace:'app',
    state:{
        todos:[],
        loading:false,
    },
    reducers:{
        add(state,{payload:todo}){
            const todos = state.todos.concat(todo)
            return {...state,todos}
        }
    }
})

7.7 Effect


app2.model({
    namespace:'todos',
    effects:{
        *addRemove({payload:todo},{put,call}){
            yield call (addTodo,todo)
            yield put({type:'add',payload:todo})
        }
    }
})

7.7.1 put 用于出发action

yield put({ type: 'todos/add', payload: 'Learn Dva' });

// 7.7.2 call 用于调用异步逻辑 支持promise

const result = yield call(fetch, '/todos');

// 7.7.3 select 从state中获取数据

const todos = yield select(state => state.todos)

7.7.3 错误的处理
app.model({
  effects: {
    *addRemote() {
      try {
        // Your Code Here
      } catch(e) {
        console.log(e.message);
      }
    },
  },
});

7.8 异步请求 whatwg-fetch

fetch学习地址: https://github.com/github/fetch

7.8.1 get 和 post

import request from '../util/request'

//get
request('/api/todos')

// post

request ('/api/todos',{
    methods:'post',
    body:JSON.stringify({a:1})
})

7.9 Subscription 订阅 异步数据的初始化

app.model({
    subscriptions:{
        setup({dispatch,history}){
            history.listen(({pathname})=>{
                if(pathname === 'users'){
                    dispatch({
                        type:'users/fetch'
                    })
                }
            })
        }
    }
})

7.10 路由 基于action进行页面跳转

import {routerRedux} from 'dva/router'
// inside effects
yield put(routerRedux.push('/logout'))
// outside effects
dispatch(routerRedux.push('/logout'))
// with query
routerRedux.push({
    pathname:'/logout',
    query:{
        page:2,
    }
})

8.0 dva的配置

8.1 Redux Middleware 添加中间件


import createLogger from 'redux-logger'

const app = dva ({
    onAction:createLogger() // onAction支持数组,可同时传入多个中间件
})

// history 切换history为browserHistory

import {browserHistory} from 'dva/router'
const ap = dva({
    history:browserHistory
})

//去除 hashHistory 下的 _k 查询参数

import { useRouterHistory } from 'dva/router';
import { createHashHistory } from 'history';
const app2 = dva({
  history: useRouterHistory(createHashHistory)({ queryKey: false }),
});

9.0 工具

9.1 通过dva-cli创建项目


$ npm i dva-cli -g # 安装dva-cli
$ dva new myapp # 创建项目
$ cd myapp
$ npm start # 启动项目 

扫码关注本人技术公众号,一起学习新技术哦


qrcode_for_gh_d65526d07a1e_430 (1).jpg

分类: javascript

标签: dva, react, effects, reducers, es6

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容