DvaJS快速入門

大猿猴發表於2018-12-23
JS

組成

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" }]
  ]
}
複製程式碼

資料流向

DvaJS快速入門

開發思路

  • 定義檢視

    新建 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專案就建立起來了！！！

相關文章