• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

用Taro写一个微信小程序(三)—— 配置dva

开发技术 开发技术 3小时前 3次浏览

一、关于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。

用Taro写一个微信小程序(三)—— 配置dva用Taro写一个微信小程序(三)—— 配置dva

  

END————————

平时则放荡治游,考试则熟读讲义,不问学问之有无,惟争分数之多寡;试验既终,书籍束之高阁,毫不过问,敷衍三四年,潦草塞责,文凭到手,即可借此活动于社会,岂非与求学初衷大相背驰乎?光阴虚度,学问毫无,是自误也。

 


程序员灯塔
转载请注明原文链接:用Taro写一个微信小程序(三)—— 配置dva
喜欢 (0)