多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/字节跳动/支付宝小程序、H5、React Native 等平台的应用。

参考项目

安装 dva

yarn add  dva-core dva-loading

npm i dva-core dva-loading --save

解决 redux 依赖

$ yarn add redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
# 或者使用 npm
$ npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

引入异步编程依赖

$ yarn add @tarojs/async-await
# 或者使用 npm
$ npm install --save @tarojs/async-await
// src/app.js
import '@tarojs/async-await';

创建 dva.js 文件

import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;

function createApp(opt) {
    opt.onAction = [createLogger()];
    app = create(opt);
    app.use(createLoading({}));

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

    store = app._store;
    app.getStore = () => store;

    dispatch = store.dispatch;

    app.dispatch = dispatch;
    return app;
}

export default {
    createApp,
    getDispatch() {
        return app.dispatch;
    },
};

引入 dva

//  src/app.js
import '@tarojs/async-await';
import Taro, { Component } from '@tarojs/taro';
import Index from './pages/index';
import dva from './utils/dva';
import { Provider } from '@tarojs/redux';
import models from './models';

import './app.less';

const dvaApp = dva.createApp({
    initialState: {},
    models: models,
});
const store = dvaApp.getStore();

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Index />
            </Provider>
        );
    }
}

Taro.render(<App />, document.getElementById('app'));

创建 modal

//  src/models/index.js
import common from './common';

export default [common];
//  src/models/common.js
export default {
    namespace: 'common',
    state: {
        list: [],
    },

    effects: {},

    reducers: {
        save(state, { payload }) {
            return { ...state, ...payload };
        },
    },
};