介紹

dva 首先是一個(gè)基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個(gè)輕量級的應(yīng)用框架。

數(shù)據(jù)流向

用戶需要改變數(shù)據(jù)的時(shí)候，需要通過dispatch發(fā)起一個(gè)action，同步操作會(huì)直接通過Reducers改變State,如果是異步操作會(huì)先觸發(fā)Effects然后流向Reducers最終改變State。

特點(diǎn)

• dva進(jìn)行了模塊的劃分，有了命名空間
• 每一個(gè)模塊都有完整的結(jié)構(gòu)，state、reducer、effect
• effect是處理異步的部分，底層使用redux-sagas做異步流程的控制
• 數(shù)據(jù)的修改都需要通過reducer

dva-core的使用

安裝

npm install dva-core

dva-core的配置

// dva.js dva-core配置文件
import { create } from "dva-core";
// 數(shù)據(jù)模塊的集合，返回的是數(shù)組
import models from "@/models";

// 編寫創(chuàng)建函數(shù)
function createApp(opts) {
    let app = create(opts);
    // 注冊model，必須每個(gè)都需要注冊
    models.forEach(model => {
        app.model(model);
    })
    // 啟動(dòng)應(yīng)用,必須在model注冊完成后，在store獲取之前
    app.start();
    // 獲取store
    const store = app._store;
    app.getStore = () => store;
    app.dispatch = store.dispatch;
    return app;
}

const dva = createApp({});
export default dva.getStore();

將store注入到項(xiàng)目中

• 將store注入到項(xiàng)目中，需要使用react-redux插件進(jìn)行注入

// 入口文件
import React from 'react'
import {Provider} from 'react-redux'
import App from './app'

// 引入dva的配置文件，獲取store
import store from './dva.js'

const Index = () => {
    return (
        <Provider store={store}>
            <App/>
        </Provider>
    )
}

在組件中的使用

• 使用react-redux中的connect，將store放入組件中

import React from 'react'
import {connect} from 'react-redux'

const Home = props => {
    const {login} = props;
    
    return <h1>{login.name}</h1>
}

export default connect(store => ({
    login: store.login // 把登錄模塊的store注入項(xiàng)目中
}))(Home)