dva入门教程 dva写一个计算器

DVA

dvajs中文官网
react+react-redux +sage+react-router-redux 合并 品

cnpm install dva-cli -g 安装dva 脚手架

dva new demo 创建一个项目

import dva, { connect } from ‘dva’;

五个主要的API

1. 初始化dva
   const app = dva();
2. use 使用插件
   app.use(plugin);
3. 链接 container 组件
   const App = connect((count)=>{return {count}})(Component);
   参数是一个函数 函数接收到 模型 然后返回 一个对象 json 类型
4. 使用路由组件
   app.router(routes);
5. 开启应用
   app.start(’#root’);

---

1.使用dva new count 新建项目

使用yarn install 安装

2.在 src/index.js中把app.model

注：这里不需要和react-redux 一样，把所有reducer 通过com…… 合并起来， 只需要重复注册app.modal 就可以了

app.model(require(’./models/app’).default);

3.新建

<!--models/app.js -->
export default {
    namespace: 'app',
    state: {
        count: 1
    },
    reducers: {
        add(state) {
            console.log(11);
            state.count++;
            return state;
        },
        minus(state) {
            state.count--;
            return state;
        }
    }
};

4.新建页面并且连接redux

注：页面中调用dispatch 的时候需指明 命名空间 如：app/add --app model中的add方法 home/add home model 中的add方法

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

@connect(state => ({
    count: state.app.count
}))
class App extends React.Component {
    render() {
    console.log(this.props);
    const { count } = this.props;
    return (
        <div className={styles.normal}>
        <h1 className={styles.title}>DVA count</h1>
        <div className={styles.welcome} />
        <h1>{count}</h1>
        <p className={styles.button} onClick={()=>this.props.dispatch({type:'app/add'})}>+</p>
        <p className={styles.button}>-</p>
        </div>
    );
    }
}

export default App;

5.路由配置 src/router.js 中配置

<Router history={history}>
    <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/home" exact component={Home} />
    </Switch>
</Router>

6.在modal中获取数据 使用异步

在model 中的effects 中编写异步方法，然后在页面中

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

const todos = yield select(state => state.todos);
effects: {
    *fetch({ payload }, { call, put }) { // eslint-disable-line
    // yield put({ type: 'save' });
    const data = yield call(query,payload);
    console.log(data);
    }
}