DvaJS快速入門

組成

react + react-router + redux + saga + fetch

特性

易學易用，6個API
elm概念
外掛機制
支援HMR

安裝、執行或構建

npm install dva-cli -g
dva -v
dva new your-project
cd your-project
npm start [npm run build]
複製程式碼

擴充套件：安裝antdesign和babel-plugin-import[用於按需載入antd指令碼和樣式]

npm install antd babel-plugin-import --save
複製程式碼

編輯.webpackrc，使babel-plugin-import生效

{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
}
複製程式碼

資料流向

開發思路

定義檢視

新建 routes/HelloWorld.js，定義檢視

import React from 'react';
const Hello = (props) => (
  <h2>HelloWorld!</h2>
);
export default Hello;
複製程式碼

設定路由

編輯 router.js，新增路由資訊到路由表

import HelloWorld from './routes/HelloWorld';
...
<Route path="/helloworld" exact component={HelloWorld} />
複製程式碼

抽取公共元件[可選]

新建 components/HelloWorld.js 檔案

import React from 'react'; 
const HelloWorld = ({title}) => {
  return (
      <h2>{title}</h2>
  );
};
export default HelloWorld;
複製程式碼

定義model

包括同步更新 state 的 reducers，處理非同步邏輯的 effects，訂閱資料來源的 subscriptions。

新建 models/hello.js
```
export default {
  namespace: 'hello',
  state: {
      title:"HelloWorld!",
  },
  reducers: {
  },
  effects:{
  },
};
複製程式碼
```
解釋說明： namespace 表示在全域性 state 上的 key state 是初始值，在這裡是空陣列 reducers 等同於 redux 裡的 reducer，接收 action，同步更新 state

編輯index.js，載入modal
```
  app.model(require('./models/hello').default);
複製程式碼
```

檢視與模型的連線

編輯 routes/HelloWorld.js

import React from 'react';
import { connect } from 'dva';
import HelloWorld  from '../components/HelloWorld';
const Hello = ({ dispatch, title}) => {   
  return (
      <Helloworld  title={title} />
  );
};
export default connect(({ hello }) => ({
  hello,
}))(Hello);
複製程式碼

編輯index.js，啟動dva

const app = dva();
複製程式碼

於是乎，一個dva專案就建立起來了！！！

DvaJS快速入門

組成

特性

安裝、執行或構建

資料流向

開發思路

相關文章