Dva.js總結

mj 發布于2019-08-26 13:28 / 1314人閱讀

摘要：是基于現有應用架構等的一層輕量封裝，沒有引入任何新概念，全部代碼不到行。他最核心的是提供了方法，用于把封裝到一起表示的狀態數據觸發的函數，是改變的唯一途徑被稱為副作用，在我們的應用中，最常見的就是異步操作在中聚合積累的結果是當前的對象。

1.why Dva

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

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

2.簡單明了的Dva數據流向

數據的改變發生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉等）觸發的，當此類行為會改變數據的時候可以通過 dispatch 發起一個 action，如果是同步行為會直接通過 Reducers 改變 State ，如果是異步行為（副作用）會先觸發 Effects 然后流向 Reducers 最終改變 State

3.Dva Router控制

dva 實例提供了 router 方法來控制路由，使用的是react-router

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

4.dva 應用的最簡結構（帶 model)

dva 提供多個 effect 函數內部的處理函數，比較常用的是 call 和 put。
   call：執行異步函數
   put：發出一個 Action，類似于 dispatch

課堂實戰

// 創建應用
const app = dva();

// 注冊 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發action
    },
  },
});

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

// 啟動應用
app.start("#root");

5.AntDesignPro1.0項目中的Dva

1.index.js

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

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

// 3. Register global model
app.model(require("./models/global").default);//將src/modles里面的東西灌進去，通過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": {//添加路徑指向引入的組件，這條數據會被getRoutes函數渲染成真正的包裹的路由
          component: dynamicWrapper(app, ["personbaseTwo"], () => import("../routes/Person/PersonBaseTwo")),
        },
        "/person/baseInfo/:id": {//dynamicWrapper函數會吧[]里面數據放到app的model屬性里，app是dva的實例
          component: dynamicWrapper(app, ["personbase"], () => import("../routes/Person/PersonBase/BaseInfo")),
        },
        ·······

3.connect連接model

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

4.跳轉路由

onOk() {//點擊確定執行的函數
          const {id}= record;
          than.props.dispatch(routerRedux.push({//用來跳轉路由的
            pathname: `/person/baseInfoTwo/${id}`,//用這個pathname重新渲染路由頁面并傳ID
          }))
        },

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108890.html

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

摘要：介紹首先是一個基于和的數據流方案，然后為了簡化開發體驗，還額外內置了和，所以也可以理解為一個輕量級的應用框架。介紹(dva.js) dva 首先是一個基于 redux 和 redux-saga 的數據流方案，然后為了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。特性易學易用，僅有 6 個 api，對 redu...

makeFoxPlay 2019-08-23 10:47 評論0 收藏0
基于Dva.js的Blog SPA實踐

摘要：項目地址項目預覽登錄流負責全局的登錄狀態管理?？傮w思想所有的組件都盡量是所有的狀態組件一般都是路由組件。所有的分發都交給了路由組件來完成。數據的獲取有兩種方式。一種是官方推薦的使用在訂閱數據源。項目地址 https://github.com/HeskeyBaoz... 項目預覽 showImg(https://segmentfault.com/img/bVIQHX?w=1249&h=...

vslam 2019-08-20 14:06 評論0 收藏0
UMI.js使用方法

摘要：或者在中導入樣式文件存放全局通用請求存放通用方法這是時生產的臨時目錄，默認包含和，有些插件也會在這里生成一些其他臨時文件。項目中常用于發送請求，等待服務端響應數據。如果使用的裝飾器則為 umi.js使用方法 node環境安裝在官網下載與系統相應的node版本，node.js版本>=8.10 編輯器推薦使用Visual Studio Code 安裝方法安裝umi npm insta...

hearaway 2019-08-23 16:56 評論0 收藏0
如何使用ReactNative快速開發一個APP

摘要：鑒于我平常使用的是系統，就決定我只開發安卓客戶端，客戶端我們又招了一個小伙伴。一般來講，安卓系統是這一兩年市面上常用機型配置的系統。從去年的10月份開始，我的大部分工作重心從傳統的前端開發轉向了使用ReactNative開發APP，在這個過程當中，走過了不少彎路，也遇到了一些技術相關的問題，但總算沒有辜負那些對我信任的人。經歷過痛苦和無助，終于堅持了下來，一個月的時間把產品成功部署上...

taowen 2019-08-26 13:47 評論0 收藏0
vue 在移動端體驗上的優化解決方案

摘要：去年年底自己搭了一個在移動端的開發框架，感覺體驗不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗優化的實戰。去年年底自己搭了一個vue在移動端的開發框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發框架做了以下優化自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態管理緩存組件 better-sc...

godlong_X 2019-05-22 11:25 評論0 收藏0