小程序——Taro集成dva状态管理工具

一、什么是DvaJs？

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
如果你在使用Taro时，用的React语法，那么dva可能是你最好的选择；如果你使用的Vue，那么Vuex就是你的不二选择。
【DvaJs传送门】

二、安装dva

在Taro集成dva时，我们需要安装dva-core和dva-loading

yarn add dva-core dva-loading
// 或者
npm install dva-core dva-loading --svae

三、如何配置

新建src/utils/dva.js

import { create } from "dva-core";
import createLoading from "dva-loading";

let app = {
  dispatch: null,
};
let store;
let dispatch;

function createApp(opt) {
  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;
  },
};

四、如何使用

• app.js

import React, { Component } from "react";
import { Provider } from "react-redux";
import dva from "@/utils/dva";
import models from "./models/index";
import "./app.scss";

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

class App extends Component {
  render() {
    return <Provider store={store}>{props.children}</Provider>;;
  }
}
export default App;

• 新建src/models/index.js

import Taro from "@tarojs/taro";
import { getUserInfo } from "@/api";

export default {
  // 这是模块名
  namespace: "global", 
  // 初始化数据
  state: {
    userInfo: null
  },
  // 这里主要调用异步方法
  effects: {
    *getUserInfo( payload, { call, put }) {
      const res = yield call(getUserInfo);
      yield put({
          type: "setUserInfo",
          payload: res,
        });
    },
  },
  // 同步方法， 修改state值
  reducers: {
    setUserInfo(state, { payload }) {
      return { ...state, userInfo: payload };
    },
  },
};

• 组件中调用userInfo
  • page/index.js

import { connect } from 'react-redux';
import { View } from '@tarojs/components'

function HomePage (props) {
	// dva-loading 
	// loading状态变化 undefined -> true -> false
	// loading在第一次是undefined，所以这里我们默认true， 
	// 有时候我们需要等state变化以后才加载组件，这就需要我们通过dva-loading去判断
	const { userInfo, loading = true } = props;
	if(loading) {
		return <View>加载中...</View>
	}
	return (
		<View>我的名字是：{userInfo.username}</View>
	)
}
export default connect(({ globle, loading })=>({
	...globle,
	loading: loading.models.global
}))(HomePage)

这里只是简单介绍了下Taro如果集成dva，以及dva简单使用，关于dva更加详细的内容，可以参考官方文档【DvaJs传送门】