做网站什么系统简单/短期的技能培训有哪些

文章参考

1. https://dvajs.com/guide/introduce-class.html#reducer
2. JavaScript异步编程：Generator与Async

案例描述

定义model

前面写过redux相关的笔记，与redux做比较来理解model

1. namespace：model的命名空间，namespace也是全局state的属性，只支持字符串格式。
2. state：初始值。
3. reducers：以key/value的格式来定义reducer。用于处理同步操作，唯一可以修改state的地方，由action触发。格式为：(state, action) => newState 或者 [(state, action) => newState, enhancer]。
4. effects：以key/value格式定义effect。用于处理异步操作和业务逻辑，不直接修改state。由action触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。

function getServerData (step) {console.dir(arguments);return new Promise(function(resolve, reject){setTimeout(function () {resolve({step: step + 1})}, 3000)});
}export default {namespace : 'huangbiao',// State 表示 Model 的状态数据，通常表现为一个 javascript 对象（当然它可以是任何值）state : {count : 10},// Reducer 是 Action 处理器，用来处理同步操作，可以看做是 state 的计算器。它的作用是根据 Action，从上一个 State 算出当前 State。reducers : {//Reducer（也称为 reducing function）函数接受两个参数：// 之前已经累积运算的state结果 和 当前要被累积的值，返回的是一个新的累积结果add (state, userParams) {var {count} = state;var step = userParams.step;return {...state,count: count + step}},minus (state, userParams) {var {count} = state;var step = userParams.step;return {...state,count: count - step};}},// Action 处理器，处理异步动作，基于 Redux-saga 实现。// 根据函数式编程，计算以外的操作都属于 Effect，典型的就是 I/O 操作、数据库读写。effects : {// 只能定义 generater 函数，不能用async 函数// call：执行异步函数// put：发出一个 Action，类似于 dispatchsetIncrease: function* (action, { put, call }) {console.dir(arguments);// 使用 call 去调用 getServerData 方法，后面全部是 getServerData 的参数// serverData 是getServerData返回的结果var serverData = yield call(getServerData , action.step, "param_1", "6000");console.dir(serverData);// 使用 put 调用reduceryield put({type:'add',...serverData});},*setDecrease (action, { put, call }) {var serverData = yield call(getServerData , action.step, "param_1", "6000");console.dir(serverData);// 使用 put 调用reduceryield put({type:'minus',step: serverData.step});}}}

effects 参数介绍

1. 第一个参数：是action对象（本质是一个包含type的JSON对象）
2. 第二个参数：包含{put, call}方法的对象，其中call 是用来调用异步方法，put可以理解为与redux的dispatch方法一样，触发reducer方法
3. call 调用的函数，第一个是Generator函数，后面的参数全部是Generator的参数

connect关联model和UI组件

import React from 'react';
import { connect } from 'dva';class reduxDemo extends React.Component {constructor (props) {super(props);}increace = () => {const {dispatch} = this.props;dispatch({// 这里要指明命名空间type: 'huangbiao/add',step: 1});}decrease = () => {const {dispatch} = this.props;dispatch({// 这里要指明命名空间type: 'huangbiao/minus',step: 3});}render () {const {count, increaceEffect, decreaseEffect} = this.propsreturn (<div><div>huangbiao.count ---- {count}</div><div><button onClick={this.increace}>添加</button></div><div><button onClick={increaceEffect}>异步添加</button></div><div><button onClick={this.decrease}>减少</button></div><div><button onClick={decreaseEffect}>异步减少</button></div></div>);}
}function mapStateToProps (state) {console.dir(state);return {count : state.huangbiao.count}
}function mapDispatchToProps (dispatch) {return {dispatch: dispatch,// 异步添加数据increaceEffect: function () {dispatch({// 这里要指明命名空间type: 'huangbiao/setIncrease',step: 2})},// 异步减少数据decreaseEffect: function () {dispatch({// 这里要指明命名空间type: 'huangbiao/setDecrease',step: 2})}}
}export default connect(mapStateToProps, mapDispatchToProps)(reduxDemo);

1. import { connect } from 'dva'; connect 将UI组件和model关联起来
2. connect有两个参数
   • 第一个参数：将Model中的state映射为UI组件的props属性
   • 第二个参数: 将dispatch映射为UI组件的方法

启动文件引入 model配置

import dva from 'dva';
import './index.css';// 1. Initialize
// // 创建应用
const app = dva();// 2. Plugins
// app.use({});// 3. Model
// app.model(require('./models/example').default);
app.model(require('./models/hbmodles').default);// 4. Router
// // 注册视图
app.router(require('./router').default);// 5. Start
// // 启动应用
app.start('#root');