Dva.js總結(jié)

mj 發(fā)布于2019-08-26 13:28 / 1365人閱讀

摘要：是基于現(xiàn)有應(yīng)用架構(gòu)等的一層輕量封裝，沒(méi)有引入任何新概念，全部代碼不到行。他最核心的是提供了方法，用于把封裝到一起表示的狀態(tài)數(shù)據(jù)觸發(fā)的函數(shù)，是改變的唯一途徑被稱為副作用，在我們的應(yīng)用中，最常見(jiàn)的就是異步操作在中聚合積累的結(jié)果是當(dāng)前的對(duì)象。

1.why Dva

dva 是基于現(xiàn)有應(yīng)用架構(gòu) (redux + react-router + redux-saga 等)的一層輕量封裝，沒(méi)有引入任何新概念，全部代碼不到 100 行。dva 實(shí)現(xiàn)上盡量不創(chuàng)建新語(yǔ)法，而是用依賴庫(kù)本身的語(yǔ)法，比如 router 的定義還是用 react-router 的 JSX 語(yǔ)法的方式(dynamic config 是性能的考慮層面，之后會(huì)支持)。
他最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封裝到一起

app.model({
  namespace: "products",
  state: {//State 表示 Model 的狀態(tài)數(shù)據(jù)
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: "products/query"});//觸發(fā) action 的函數(shù)，action 是改變 State 的唯一途徑
    },
  ],
  effects: {//Effect 被稱為副作用，在我們的應(yīng)用中，最常見(jiàn)的就是異步操作
    ["products/query"]: function*() {
      yield call(delay(800));
      yield put({
        type: "products/query/success",
        payload: ["ant-tool", "roof"],
      });
    },
  },
//在dva中reducers聚合積累的結(jié)果是當(dāng)前model的state 對(duì)象。通過(guò)actions中傳入的值，
//與當(dāng)前 reducers 中的值進(jìn)行運(yùn)算獲得新的值（也就是新的 state）
  reducers: {
    ["products/query"](state) {
      return { ...state, loading: true, };
    },
    ["products/query/success"](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

2.簡(jiǎn)單明了的Dva數(shù)據(jù)流向

數(shù)據(jù)的改變發(fā)生通常是通過(guò)用戶交互行為或者瀏覽器行為（如路由跳轉(zhuǎn)等）觸發(fā)的，當(dāng)此類行為會(huì)改變數(shù)據(jù)的時(shí)候可以通過(guò) dispatch 發(fā)起一個(gè) action，如果是同步行為會(huì)直接通過(guò) Reducers 改變 State ，如果是異步行為（副作用）會(huì)先觸發(fā) Effects 然后流向 Reducers 最終改變 State

3.Dva Router控制

dva 實(shí)例提供了 router 方法來(lái)控制路由，使用的是react-router

const app = dva();
import { Router, Route } from "dva/router";
app.router(({history}) =>
  
    
  
);

4.dva 應(yīng)用的最簡(jiǎn)結(jié)構(gòu)（帶 model)

dva 提供多個(gè) effect 函數(shù)內(nèi)部的處理函數(shù)，比較常用的是 call 和 put。
   call：執(zhí)行異步函數(shù)
   put：發(fā)出一個(gè) Action，類似于 dispatch

課堂實(shí)戰(zhàn)

// 創(chuàng)建應(yīng)用
const app = dva();

// 注冊(cè) Model
app.model({
  namespace: "count",
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);//異步操作
      yield put({ type: "add" });//類似于dispatch發(fā)action
    },
  },
});

// 注冊(cè)視圖
app.router(() => );

// 啟動(dòng)應(yīng)用
app.start("#root");

5.AntDesignPro1.0項(xiàng)目中的Dva

1.index.js

const app = dva({
  history: createHistory(),//history可以用來(lái)跳轉(zhuǎn)路由內(nèi)含location屬性，這里修改history默認(rèn)接口，其他接口不變----初始化
});

// 2. Plugins
app.use(createLoading());//加載插件這里應(yīng)該加載的是加載動(dòng)畫插件

// 3. Register global model
app.model(require("./models/global").default);//將src/modles里面的東西灌進(jìn)去，通過(guò)namespace取

// 4. Router
app.router(require("./router").default);//全局掛載路由信息

// 5. Start
app.start("#root");

export default app._store;

2.router.js

export const getRouterData = app => {
    const routerConfig = {
        "/": {
            component: dynamicWrapper(app, ["user", "login"], () => import("../layouts/BasicLayout")),
        },
        "/person/personbasetwo": {//添加路徑指向引入的組件，這條數(shù)據(jù)會(huì)被getRoutes函數(shù)渲染成真正的包裹的路由
          component: dynamicWrapper(app, ["personbaseTwo"], () => import("../routes/Person/PersonBaseTwo")),
        },
        "/person/baseInfo/:id": {//dynamicWrapper函數(shù)會(huì)吧[]里面數(shù)據(jù)放到app的model屬性里，app是dva的實(shí)例
          component: dynamicWrapper(app, ["personbase"], () => import("../routes/Person/PersonBase/BaseInfo")),
        },
        ·······

3.connect連接model

/*dva的實(shí)例app中應(yīng)該導(dǎo)入了所有的model，好像是在router中導(dǎo)入的，
這里用解構(gòu)賦值從model中取值，為組件導(dǎo)入props，loading為dva提供的動(dòng)畫插件*/
@connect(({ personbaseTwo, loading }) => ({
  personbaseTwo,
  searchLoading: loading.effects["personbaseTwo/getList"],
//loding被這個(gè)異步函數(shù)影響，異步操作中就為ture，結(jié)束就為false
  loading: loading.effects["personbaseTwo/listpage"],
}))//從model中取數(shù)據(jù)生成自己想要的對(duì)象結(jié)構(gòu)通過(guò)@修飾器放到下面組件中去
class personbaseTwo extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  componentWillMount(){//組件將要渲染時(shí)拿到默認(rèn)的一頁(yè)多少條和當(dāng)前頁(yè)這些數(shù)據(jù)
    const { personbaseTwo:{pagination} }= this.props;
    const { page,pageSize } = pagination;
    this.props.dispatch({//轉(zhuǎn)到namespace為personbaseTwo下面的listpage方法拿到頁(yè)碼為page的數(shù)據(jù)
      type:"personbaseTwo/listpage",//接口根據(jù)page只去此頁(yè)數(shù)據(jù)
      payload:{
        page,
        pageSize,
      },
    });
  }
·······

4.跳轉(zhuǎn)路由

onOk() {//點(diǎn)擊確定執(zhí)行的函數(shù)
          const {id}= record;
          than.props.dispatch(routerRedux.push({//用來(lái)跳轉(zhuǎn)路由的
            pathname: `/person/baseInfoTwo/${id}`,//用這個(gè)pathname重新渲染路由頁(yè)面并傳ID
          }))
        },

云服務(wù)器 GPU云服務(wù)器 dva.js 年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108890.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mj

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2021-09-29

閱讀 3387·2021-09-30 09:47
C++之vector：靈活的數(shù)組

閱讀 2404·2021-09-10 10:51
??《小黃鴨調(diào)試法》程序員必備技能??！!??

閱讀 2006·2021-09-08 09:36
前端學(xué)習(xí)之路

閱讀 2998·2019-08-30 12:56
Vue+CSS3實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)

閱讀 3124·2019-08-30 11:16
阿里巴巴2018秋招總結(jié)

閱讀 2690·2019-08-29 16:40
前端每日實(shí)戰(zhàn)：27# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)精彩的彩虹 loading 特效

閱讀 3053·2019-08-29 15:25
web-style文檔

閱讀 1691·2019-08-29 11:02

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Dva.js總結(jié)

相關(guān)文章

(入門)手把手帶你更簡(jiǎn)單的使用dva

**基于Dva.js的Blog SPA實(shí)踐**

UMI.js使用方法

如何使用ReactNative快速開(kāi)發(fā)一個(gè)APP

vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案

發(fā)表評(píng)論

0條評(píng)論

mj

男|高級(jí)講師

TA的文章

2021-09-29

C++之vector：靈活的數(shù)組

??《小黃鴨調(diào)試法》程序員必備技能??！!??

前端學(xué)習(xí)之路

Vue+CSS3實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)

阿里巴巴2018秋招總結(jié)

前端每日實(shí)戰(zhàn)：27# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)精彩的彩虹 loading 特效

web-style文檔

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Dva.js總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！