多端统一开发框架,支持用 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 };
},
},
};