一、關於dva

dva 首先是一個基於 redux 和 redux-saga 的資料流方案，然後為了簡化開發體驗，dva 還額外內建了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。

具體內容可以看官網。

二、在taro中配置dva

1、安裝如下依賴

npm install --save dva-core dva-loading

npm install --save redux react-redux redux-thunk redux-logger

2、在src目錄下建立utils目錄，並在utils目錄裡建立dva.js檔案

src/utils/dva.js

import { create } from 'dva-core';

import createLoading from 'dva-loading';

let app;

let store;

let dispatch;

function createApp(opt) {

  // redux日誌

  app = create(opt);

  app.use(createLoading({}));

  // 注入model

  if (!global.registered) opt.models.forEach(model => app.model(model));

  global.registered = true;

  app.start();

  // 設定store

  store = app._store;

  app.getStore = () => store;

  app.use({

    onError(err) {

      console.log(err);

    }

  })

  // 設定dispatch

  dispatch = store.dispatch;

  app.dispatch = dispatch;

  return app;

}

export default {

  createApp,

  getDispatch() {

    return app.dispatch;

  }

}

3、在src目錄下建立models目錄，並在models目錄裡建立index.js檔案

src/models/index.js（index.js返回專案中建立的所有model）

import common from './common';

export default [common];

src/models/common.js （common是建立的一個model）

export default {

  namespace: 'common',

  state: {

    name: '麥豇豆',

  },

  effects: {},

  reducers: {

    save(state, { payload }) {

      return { ...state, ...payload };

    },

  },

};

4、在入口檔案app.js中建立一個app獲取store，並將store掛載到Provider容器裡面

src/app.js

import { Component } from 'react'

import { Provider } from 'react-redux'

import './app.scss'

import dva from './utils/dva'

import models from './models/index'

const dvaApp = dva.createApp({

  initialState: {},

  models,

});

const store = dvaApp.getStore();

class App extends Component {

  // this.props.children 是將要會渲染的頁面

  render () {

    return <Provider store={store}>

      {this.props.children}

    </Provider>

  }

}

export default App

這就配置好啦~【撒花】

三、驗證dva是否配置成功

在上面我已經建立了一個model，裡面存了name，下面我們就使用connect來連線這個model。

src/pages/home/index.js

import { Component } from 'react'

import { View, Text } from '@tarojs/components'

import { connect } from 'react-redux'

import './index.scss'

class Index extends Component {

  componentDidMount () {

    console.log('props', this.props)

  }

  render () {

    const { name } = this.props

    return (

      <View className='home'>

        <Text className='title'>{name}</Text>

      </View>

    )

  }

}

export default connect(({ common }) => ({ ...common }))(Index);

列印this.props，可以取到model裡面儲存的state，頁面也可以正確展示出name。

END------------------------

平時則放蕩治遊，考試則熟讀講義，不問學問之有無，惟爭分數之多寡；試驗既終，書籍束之高閣，毫不過問，敷衍三四年，潦草塞責，文憑到手，即可藉此活動於社會，豈非與求學初衷大相背馳乎？光陰虛度，學問毫無，是自誤也。