dva 学习实战
import dva from 'dva';import { Router, Route, Switch } from 'dva/router';import styles from './index.less';import Content from './Conten';import {connect} from 'dva';// 在定义了 Model 和 Componen...
·
import dva from 'dva';
import { Router, Route, Switch } from 'dva/router';
import styles from './index.less';
import Content from './Conten';
import {connect} from 'dva';
// 在定义了 Model 和 Component 之后,我们需要把它们连接起来。这样 Component 里就能使用 Model 里定义的数据,而 Model 中也能接收到 Component里 dispatch 的 action
const CountApp = ({count, dispatch}) => {
return (
<div className={styles.normal}>
<Content/>
<div className={styles.record}>Highest Record: {count.record}</div>
<div className={styles.current}>{count.current}</div>
<div className={styles.button}>
{/*dispatch 是一个函数方法,用来将 Action 发送给 Model 中的State。
dispatch方法从哪里来?被 connect 的 Component 会自动在 Props 中拥有 dispatch 方法。
*/}
<button onClick={() => { dispatch({type: 'count/add'}); }}>+</button>
<button onClick={() => {dispatch({type:'count/minus'}); }}>-</button>
<button onClick={() => {dispatch({type:'count/showPic'});}}>show</button>
</div>
{count.show?<img src="1.jpeg" alt="新垣结衣"/>:null}
</div>
);
};
function mapStateToProps (state) {
return {
count:state.count
};
}
//connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State
//connect 方法传入的第一个参数是 mapStateTOProps 函数,这个函数返回一个对象,用于建立 State 到 Props 的映射关系。
const HomePage = connect(mapStateToProps)(CountApp);
// 1. Initialize
const app = dva();
// 2. Model
// model 对象的属性
// namespace : 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成。
//state:该 MOdel 当前的状态。数据保存在这里,直接决定了视图层的输出。
//reducers:Action 处理器。处理同步动作,算出最新的 State 。
//effects:Action 处理器。处理异步动作 。
app.model({
namespace: 'count',
state: {
record: 0,
current: 0,
show: 0,
},
reducers: {
// add(){} 等同于 add:fucntion(){}
add(state) {
const newCurrent = state.current + 1;
return {
...state,
record: newCurrent > state.record ? newCurrent : state.record,
current: newCurrent,
};
},
minus(state) {
return {
...state, current: state.current - 1
};
},
showPic(state) {
return {
...state,
show: !state.show
}
}
},
})
// Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O操作、数据库读写。
// Effect 是一个 Generator函数,内部使用 yield 关键字,标识每一步的操作(不管是同步还是异步)。
// dva 提供多个 effect 函数内部的处理函数,比较常用的是 call 和 put。
// call 函数:执行异步操作
// put 函数:发出一个Action,类似于 dispatch
// 3. Router
// 接收到 url 之后决定渲染哪些 Component,这是由路由决定
// const HomePage = () => <div>Hello Dva.</div>;
app.router(({ history }) =>
<Router history={history}>
<Switch>
<Route path="/" exact component={HomePage} />
</Switch>
</Router>
);
// 4. Start
app.start('#root');
更多推荐
所有评论(0)